@mobilon-dev/chotto 0.0.1 → 0.0.2

package/README.md

@@ -5,7 +5,7 @@ Vue3 Chat UI - собери свой интерфейс чата
 
 ## документация
 
-- ссылка
+- [storybook](https://mobilon-dev.github.io/chotto/)
 
 ## схема
 
@@ -13,14 +13,13 @@ Vue3 Chat UI - собери свой интерфейс чата
 
 ## пример
 
-- ссылка
+[пример](https://github.com/antirek/chotto-sample)
 
 ## скриншот
 
 ![](images/screenshot1.png)
 
 
-
 # разработка
 
 
@@ -32,6 +31,10 @@ Vue3 Chat UI - собери свой интерфейс чата
 
 > npm run storybook
 
+## run dev
+
+> npm run dev
+
 ## build
 
 > npm run build

package/dist/style.css

@@ -1 +1 @@
-.chat[data-v-77b8ac34]{cursor:pointer;padding:8px;border-bottom:1px solid #ccc}.file-message a[data-v-9fef0716]{color:#00f;text-decoration:underline}.image-message img[data-v-1c1327d6]{max-width:100%;border-radius:5px}.text-message-left[data-v-4deff5d3]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.text-message-right[data-v-4deff5d3]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.chat-info[data-v-7ca4835c]{padding:16px}.chat-input[data-v-07719b64]{padding:10px}.chat-input input[data-v-07719b64]{flex:1;width:500px;padding:10px;border:1px solid #ece5dd;border-radius:20px}.chat-input button[data-v-07719b64]{padding:10px;margin-left:10px;border:none;background-color:#25d366;color:#fff;border-radius:20px;cursor:pointer}.chat-input button[data-v-07719b64]:hover{background-color:#128c7e}.chat-list[data-v-dda91c95]{max-height:400px;overflow-y:auto;grid-column:span 1}.message-feed[data-v-b2d2ed34]{flex:1;max-height:400px;height:300px;overflow:auto;display:flex;flex-direction:column;gap:5px}.profile[data-v-e1bf37ef]{padding:16px}
+.chat[data-v-77b8ac34]{cursor:pointer;padding:8px;border-bottom:1px solid #ccc}.chat-item[data-v-b194d366]{display:flex;align-items:center;padding:15px;border-bottom:1px solid #eee;cursor:pointer}.chat-item-selected[data-v-b194d366]{display:flex;align-items:center;padding:15px;background:#bbb;border-bottom:1px solid #a09d9d;cursor:pointer}.avatar[data-v-b194d366]{width:50px;height:50px;border-radius:50%;background-size:cover;margin-right:15px}.chat-info[data-v-b194d366]{flex-grow:1;margin-right:15px}.name[data-v-b194d366]{font-weight:700;font-size:16px;margin-bottom:5px}.last-message[data-v-b194d366]{font-size:14px;color:#888}.chat-details[data-v-b194d366]{display:flex;align-items:center}.unread[data-v-b194d366]{background-color:red;color:#fff;padding:5px 8px;border-radius:50%;font-size:12px;margin-right:10px}.time[data-v-b194d366]{font-size:12px;color:#888}.file-message a[data-v-18efd407]{color:#00f;text-decoration:underline}.image-message[data-v-1f459534]{max-width:300px;max-height:240px;height:auto;border-radius:5px}.image-message-left[data-v-1f459534]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.image-message-right[data-v-1f459534]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.message-time[data-v-1f459534]{font-size:12px;color:#777;margin-left:10px}.text-message-left[data-v-c807c835]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.text-message-right[data-v-c807c835]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.message-time[data-v-c807c835]{font-size:12px;color:#777;margin-left:10px}.chat-info[data-v-7ca4835c]{padding:16px}.chat-input[data-v-07719b64]{padding:10px}.chat-input input[data-v-07719b64]{flex:1;width:500px;padding:10px;border:1px solid #ece5dd;border-radius:20px}.chat-input button[data-v-07719b64]{padding:10px;margin-left:10px;border:none;background-color:#25d366;color:#fff;border-radius:20px;cursor:pointer}.chat-input button[data-v-07719b64]:hover{background-color:#128c7e}.chat-list[data-v-fafd9097],.chat-list[data-v-1fd0e46c]{max-height:400px;overflow-y:auto;grid-column:span 1}.message-container{display:flex;align-items:center;margin-bottom:10px;padding:8px 12px;border-radius:10px}.message-container.sent{background-color:#e0f2f7;color:#333;margin-left:auto}.message-container.received{background-color:#f5f5f5;color:#000;margin-right:auto}.message-content{margin-right:10px}.chat-image{max-width:200px;max-height:150px;cursor:pointer}.preview-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:10px;z-index:100}.preview-image{max-width:80%;max-height:80vh}.message-info{display:flex;align-items:center;margin-left:10px}.message-status{font-size:12px}.status{margin-left:5px}.status.read{color:#34a853}.status.delivered{color:#333}.status.sending{color:#777}.message-time{font-size:12px;color:#777;margin-left:10px}.dateMessage[data-v-2d53fb22]{display:flex;align-items:center;justify-content:center;margin:0 auto;padding:15px 0;width:150px;height:40px}.dateMessage__text[data-v-2d53fb22]{width:100%;padding:10px 15px;border-radius:15px;background-color:#fff;-webkit-box-shadow:0 2px 5px 0 rgba(193,193,193,.26),0 2px 10px 0 rgba(193,193,193,.16);-moz-box-shadow:0 2px 5px 0 rgba(193,193,193,.26),0 2px 10px 0 rgba(193,193,193,.16);box-shadow:0 2px 5px #c1c1c142,0 2px 10px #c1c1c129;font-size:16px;font-weight:600;color:#000000b3;text-align:center}.audio-message-left[data-v-127acb40]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.audio-message-right[data-v-127acb40]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.message-time[data-v-127acb40]{font-size:12px;color:#777;margin-left:10px}.message-feed[data-v-37208651]{flex:1;max-height:600px;height:500px;max-width:800px;overflow:auto;display:flex;flex-direction:column;gap:5px}.profile[data-v-e1bf37ef]{padding:16px}

package/dist/vuessages.es.js

@@ -1,8 +1,8 @@
-import { openBlock as c, createElementBlock as a, createElementVNode as u, toDisplayString as i, normalizeClass as x, createCommentVNode as p, ref as m, withDirectives as I, withKeys as C, vModelText as $, unref as h, Fragment as f, renderList as g, createBlock as v, watch as k, resolveDynamicComponent as b, nextTick as M } from "vue";
-const l = (e, s) => {
+import { openBlock as a, createElementBlock as n, createElementVNode as r, toDisplayString as u, normalizeClass as p, createCommentVNode as h, ref as v, withDirectives as x, withKeys as k, vModelText as w, unref as I, Fragment as $, renderList as C, createBlock as y, onUpdated as b, watch as M, resolveDynamicComponent as U, nextTick as S } from "vue";
+const _ = (e, s) => {
   const t = e.__vccOpts || e;
-  for (const [n, r] of s)
-    t[n] = r;
+  for (const [c, o] of s)
+    t[c] = o;
   return t;
 }, q = {
   __name: "Chat",
@@ -14,17 +14,60 @@ const l = (e, s) => {
   },
   emits: ["select"],
   setup(e, { emit: s }) {
-    const t = e, n = s, r = () => {
-      n("select", t.chat);
+    const t = e, c = s, o = () => {
+      c("select", t.chat);
     };
-    return (o, d) => (c(), a("div", {
+    return (i, l) => (a(), n("div", {
       class: "chat",
-      onClick: r
+      onClick: o
     }, [
-      u("p", null, i(e.chat.name) + " " + i(e.chat.countUnread), 1)
+      r("p", null, u(e.chat.name) + " " + u(e.chat.countUnread), 1)
     ]));
   }
-}, F = /* @__PURE__ */ l(q, [["__scopeId", "data-v-77b8ac34"]]), O = { class: "file-message" }, T = ["href"], j = {
+}, j = /* @__PURE__ */ _(q, [["__scopeId", "data-v-77b8ac34"]]), A = { class: "avatar" }, F = ["src"], O = { class: "chat-info" }, P = { class: "name" }, T = {
+  key: 0,
+  class: "last-message"
+}, B = { class: "chat-details" }, D = {
+  key: 0,
+  class: "unread"
+}, V = {
+  key: 1,
+  class: "time"
+}, E = {
+  __name: "Chat2",
+  props: {
+    chat: {
+      type: Object,
+      required: !0
+    }
+  },
+  emits: ["select"],
+  setup(e, { emit: s }) {
+    const t = e, c = s, o = () => {
+      c("select", t.chat);
+    }, i = () => t.chat.isSelected ? "chat-item-selected" : "chat-item", l = () => t.chat.avatar ? t.chat.avatar : "data:image/svg+xml;base64," + window.btoa('<svg fill="#000000" width="800px" height="800px" viewBox="0 -2.93 32.537 32.537" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"> <g transform="translate(-481.391 -197.473)"> <path d="M512.928,224.152a.991.991,0,0,1-.676-.264,21.817,21.817,0,0,0-29.2-.349,1,1,0,1,1-1.322-1.5,23.814,23.814,0,0,1,31.875.377,1,1,0,0,1-.677,1.736Z"/> <path d="M498.191,199.473a7.949,7.949,0,1,1-7.949,7.95,7.959,7.959,0,0,1,7.949-7.95m0-2a9.949,9.949,0,1,0,9.95,9.95,9.949,9.949,0,0,0-9.95-9.95Z"/> </g> </g></svg>');
+    return (m, d) => (a(), n("div", {
+      class: p(i()),
+      onClick: o
+    }, [
+      r("div", A, [
+        r("img", {
+          src: l(),
+          width: "50",
+          height: "50"
+        }, null, 8, F)
+      ]),
+      r("div", O, [
+        r("div", P, u(e.chat.name), 1),
+        e.chat.lastMessage ? (a(), n("div", T, u(e.chat.lastMessage), 1)) : h("", !0)
+      ]),
+      r("div", B, [
+        e.chat.countUnread > 0 ? (a(), n("div", D, u(e.chat.countUnread), 1)) : h("", !0),
+        e.chat["lastActivity.time"] ? (a(), n("div", V, u(e.chat["lastActivity.time"]), 1)) : h("", !0)
+      ])
+    ], 2));
+  }
+}, L = /* @__PURE__ */ _(E, [["__scopeId", "data-v-b194d366"]]), R = { class: "file-message" }, G = ["href"], K = {
   __name: "FileMessage",
   props: {
     message: {
@@ -33,14 +76,14 @@ const l = (e, s) => {
     }
   },
   setup(e) {
-    return (s, t) => (c(), a("div", O, [
-      u("a", {
+    return (s, t) => (a(), n("div", R, [
+      r("a", {
         href: e.message.url,
         download: ""
-      }, i(e.message.filename), 9, T)
+      }, u(e.message.filename), 9, G)
     ]));
   }
-}, w = /* @__PURE__ */ l(j, [["__scopeId", "data-v-9fef0716"]]), B = { class: "image-message" }, D = ["src", "alt"], L = {
+}, N = /* @__PURE__ */ _(K, [["__scopeId", "data-v-18efd407"]]), Z = ["messageId"], z = ["src", "alt"], H = { class: "message-time" }, J = {
   __name: "ImageMessage",
   props: {
     message: {
@@ -49,14 +92,23 @@ const l = (e, s) => {
     }
   },
   setup(e) {
-    return (s, t) => (c(), a("div", B, [
-      u("img", {
+    const s = e;
+    function t() {
+      return s.message.position === "left" ? "image-message-left" : "image-message-right";
+    }
+    return (c, o) => (a(), n("div", {
+      class: p(t()),
+      messageId: e.message.messageId
+    }, [
+      r("img", {
         src: e.message.url,
-        alt: e.message.alt
-      }, null, 8, D)
-    ]));
+        alt: e.message.alt,
+        class: "image-message"
+      }, null, 8, z),
+      r("div", H, u(e.message.time), 1)
+    ], 10, Z));
   }
-}, S = /* @__PURE__ */ l(L, [["__scopeId", "data-v-1c1327d6"]]), V = {
+}, Be = /* @__PURE__ */ _(J, [["__scopeId", "data-v-1f459534"]]), Q = ["messageId"], W = { class: "message-time" }, X = {
   __name: "TextMessage",
   props: {
     message: {
@@ -66,15 +118,17 @@ const l = (e, s) => {
   },
   setup(e) {
     function s(t) {
-      return t.direction === "incoming" ? "text-message-left" : "text-message-right";
+      return t.position === "left" ? "text-message-left" : "text-message-right";
     }
-    return (t, n) => (c(), a("div", {
-      class: x(s(e.message))
+    return (t, c) => (a(), n("div", {
+      class: p(s(e.message)),
+      messageId: e.message.messageId
     }, [
-      u("p", null, i(e.message.text), 1)
-    ], 2));
+      r("p", null, u(e.message.text), 1),
+      r("div", W, u(e.message.time), 1)
+    ], 10, Q));
   }
-}, A = /* @__PURE__ */ l(V, [["__scopeId", "data-v-4deff5d3"]]), E = { class: "chat-info" }, K = { key: 0 }, N = {
+}, Y = /* @__PURE__ */ _(X, [["__scopeId", "data-v-c807c835"]]), ee = { class: "chat-info" }, te = { key: 0 }, se = {
   __name: "ChatInfo",
   props: {
     chat: {
@@ -83,33 +137,33 @@ const l = (e, s) => {
     }
   },
   setup(e) {
-    return (s, t) => (c(), a("div", E, [
-      e.chat ? (c(), a("div", K, [
-        u("h2", null, i(e.chat.name), 1)
-      ])) : p("", !0)
+    return (s, t) => (a(), n("div", ee, [
+      e.chat ? (a(), n("div", te, [
+        r("h2", null, u(e.chat.name), 1)
+      ])) : h("", !0)
     ]));
   }
-}, X = /* @__PURE__ */ l(N, [["__scopeId", "data-v-7ca4835c"]]), P = { class: "chat-input" }, U = {
+}, De = /* @__PURE__ */ _(se, [["__scopeId", "data-v-7ca4835c"]]), ae = { class: "chat-input" }, ne = {
   __name: "ChatInput",
   emits: ["send"],
   setup(e, { emit: s }) {
-    const t = s, n = m(""), r = m(null), o = () => {
-      n.value.trim() && (t("send", n.value), n.value = "", h(r).focus());
+    const t = s, c = v(""), o = v(null), i = () => {
+      c.value.trim() && (t("send", c.value), c.value = "", I(o).focus());
     };
-    return (d, _) => (c(), a("div", P, [
-      I(u("input", {
-        "onUpdate:modelValue": _[0] || (_[0] = (y) => n.value = y),
+    return (l, m) => (a(), n("div", ae, [
+      x(r("input", {
+        "onUpdate:modelValue": m[0] || (m[0] = (d) => c.value = d),
         ref_key: "refInput",
-        ref: r,
-        onKeydown: C(o, ["enter"]),
+        ref: o,
+        onKeydown: k(i, ["enter"]),
         placeholder: "Type a message..."
       }, null, 544), [
-        [$, n.value]
+        [w, c.value]
       ]),
-      u("button", { onClick: o }, "Send")
+      r("button", { onClick: i }, "Send")
     ]));
   }
-}, Y = /* @__PURE__ */ l(U, [["__scopeId", "data-v-07719b64"]]), z = { class: "chat-list" }, H = {
+}, Ve = /* @__PURE__ */ _(ne, [["__scopeId", "data-v-07719b64"]]), ce = { class: "chat-list" }, re = {
   __name: "ChatList",
   props: {
     chats: {
@@ -119,49 +173,230 @@ const l = (e, s) => {
   },
   emits: ["select"],
   setup(e, { emit: s }) {
-    const t = s, n = (r) => {
-      t("select", r);
-    };
-    return (r, o) => (c(), a("div", z, [
-      (c(!0), a(f, null, g(e.chats, (d) => (c(), v(F, {
+    const t = e, c = s, o = (l) => {
+      c("select", l);
+    }, i = () => t.chats.sort((l, m) => {
+      if (l.countUnread > m.countUnread) return -1;
+      if (l.countUnread < m.countUnread) return 1;
+      if (l.countUnread == m.countUnread) return 0;
+    });
+    return (l, m) => (a(), n("div", ce, [
+      (a(!0), n($, null, C(i(), (d) => (a(), y(j, {
         key: d.chatId,
         chat: d,
-        onSelect: n
+        onSelect: o
       }, null, 8, ["chat"]))), 128))
     ]));
   }
-}, Z = /* @__PURE__ */ l(H, [["__scopeId", "data-v-dda91c95"]]), G = {
-  __name: "MessageFeed",
+}, Ee = /* @__PURE__ */ _(re, [["__scopeId", "data-v-fafd9097"]]), oe = {
+  __name: "ChatFilter",
+  emits: ["update"],
+  setup(e, { emit: s }) {
+    const t = v(""), c = s, o = () => {
+      const i = I(t);
+      c("update", i.value);
+    };
+    return (i, l) => (a(), n("div", null, [
+      r("input", {
+        type: "text",
+        ref_key: "refInput",
+        ref: t,
+        onInput: o,
+        placeholder: "Поиск..."
+      }, null, 544)
+    ]));
+  }
+}, ie = { class: "chat-list" }, de = {
+  __name: "ChatList2",
+  props: {
+    chats: {
+      type: Array,
+      required: !0
+    },
+    filterEnabled: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: ["select"],
+  setup(e, { emit: s }) {
+    const t = v(""), c = e, o = s, i = (d) => {
+      o("select", d), c.chats.forEach((f) => f.isSelected = !1);
+      const g = c.chats.find((f) => f.chatId === d.chatId);
+      g.isSelected = !0;
+    }, l = () => c.chats.sort((d, g) => {
+      if (d.countUnread > g.countUnread) return -1;
+      if (d.countUnread < g.countUnread) return 1;
+      if (d.countUnread == g.countUnread) return 0;
+    }).filter((d) => d.name.includes(t.value)), m = (d) => {
+      t.value = d;
+    };
+    return (d, g) => (a(), n("div", null, [
+      e.filterEnabled ? (a(), y(oe, {
+        key: 0,
+        onUpdate: m
+      })) : h("", !0),
+      r("div", ie, [
+        (a(!0), n($, null, C(l(), (f) => (a(), y(L, {
+          key: f.chatId,
+          chat: f,
+          onSelect: i
+        }, null, 8, ["chat"]))), 128))
+      ])
+    ]));
+  }
+}, Le = /* @__PURE__ */ _(de, [["__scopeId", "data-v-1fd0e46c"]]), le = {
+  props: {
+    message: {
+      type: Object,
+      required: !0
+    }
+    /*
+    imageSrc: {
+      type: String,
+      required: true,
+    },
+    isSent: {
+      type: Boolean,
+      default: false,
+    },
+    isDelivered: {
+      type: Boolean,
+      default: false,
+    },
+    isRead: {
+      type: Boolean,
+      default: false,
+    },
+    timestamp: {
+      type: Number, 
+      required: true,
+    },
+    */
+  },
+  setup(e) {
+    return {
+      showPreview: v(!1)
+    };
+  }
+}, ue = {
+  key: 0,
+  class: "message-content"
+}, me = ["src"], _e = {
+  key: 1,
+  class: "preview-container"
+}, he = ["src"], ge = { class: "message-info" }, fe = {
+  key: 0,
+  class: "message-status"
+}, ve = {
+  key: 0,
+  class: "status read"
+}, pe = {
+  key: 1,
+  class: "status delivered"
+}, ye = {
+  key: 2,
+  class: "status sending"
+}, Ie = { class: "message-time" };
+function $e(e, s, t, c, o, i) {
+  return a(), n("div", {
+    class: p(["message-container", { sent: t.message.isSent, received: !t.message.isSent }])
+  }, [
+    c.showPreview ? (a(), n("div", _e, [
+      r("img", {
+        src: t.message.url,
+        alt: "Изображение",
+        class: "preview-image"
+      }, null, 8, he),
+      s[2] || (s[2] = r("br", null, null, -1)),
+      r("button", {
+        onClick: s[1] || (s[1] = (l) => c.showPreview = !1)
+      }, "Закрыть")
+    ])) : (a(), n("div", ue, [
+      r("img", {
+        src: t.message.url,
+        onClick: s[0] || (s[0] = (l) => c.showPreview = !0),
+        alt: "Изображение",
+        class: "chat-image"
+      }, null, 8, me)
+    ])),
+    r("div", ge, [
+      t.message.isSent ? (a(), n("div", fe, [
+        t.message.isRead ? (a(), n("span", ve, "✓")) : t.message.isDelivered ? (a(), n("span", pe, "✓")) : (a(), n("span", ye, "..."))
+      ])) : h("", !0),
+      r("div", Ie, u(t.message.time), 1)
+    ])
+  ], 2);
+}
+const Ce = /* @__PURE__ */ _(le, [["render", $e]]), xe = { class: "dateMessage" }, ke = { class: "dateMessage__text" }, we = {
+  __name: "DateMessage",
+  props: {
+    message: {
+      type: Object
+    }
+  },
+  setup(e) {
+    return (s, t) => (a(), n("div", xe, [
+      r("p", ke, u(e.message.text), 1)
+    ]));
+  }
+}, be = /* @__PURE__ */ _(we, [["__scopeId", "data-v-2d53fb22"]]), Me = ["messageId"], Ue = ["src"], Se = { class: "message-time" }, qe = {
+  __name: "AudioMessage",
+  props: {
+    message: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    function s(t) {
+      return t.position === "left" ? "audio-message-left" : "audio-message-right";
+    }
+    return (t, c) => (a(), n("div", {
+      class: p(s(e.message)),
+      messageId: e.message.messageId
+    }, [
+      r("audio", {
+        src: e.message.url,
+        controls: ""
+      }, null, 8, Ue),
+      r("div", Se, u(e.message.time), 1)
+    ], 10, Me));
+  }
+}, je = /* @__PURE__ */ _(qe, [["__scopeId", "data-v-127acb40"]]), Ae = {
+  __name: "Feed",
   props: {
-    messages: {
+    objects: {
       type: Array,
       required: !0
     }
   },
   setup(e) {
-    const s = m(null), t = e, n = (o) => ({
-      "message.text": A,
-      "message.image": S,
-      "message.file": w
-    })[o];
-    function r() {
-      M(function() {
-        const o = h(s);
-        o.scrollTop = o.scrollHeight;
+    const s = v(null), t = e, c = (i) => ({
+      "message.text": Y,
+      "message.image": Ce,
+      "message.file": N,
+      "message.audio": je,
+      "system.date": be
+    })[i];
+    function o() {
+      S(function() {
+        const i = I(s);
+        i.scrollTop = i.scrollHeight;
       });
     }
-    return k(() => t.messages, r), (o, d) => (c(), a("div", {
+    return b(() => o), M(() => t.objects, o), (i, l) => (a(), n("div", {
       class: "message-feed",
       ref_key: "refFeed",
       ref: s
     }, [
-      (c(!0), a(f, null, g(e.messages, (_) => (c(), v(b(n(_.type)), {
-        key: _.id,
-        message: _
+      (a(!0), n($, null, C(e.objects, (m) => (a(), y(U(c(m.type)), {
+        key: m.messageId,
+        message: m
       }, null, 8, ["message"]))), 128))
     ], 512));
   }
-}, ee = /* @__PURE__ */ l(G, [["__scopeId", "data-v-b2d2ed34"]]), J = { class: "profile" }, Q = { key: 0 }, R = {
+}, Re = /* @__PURE__ */ _(Ae, [["__scopeId", "data-v-37208651"]]), Fe = { class: "profile" }, Oe = { key: 0 }, Pe = {
   __name: "Profile",
   props: {
     user: {
@@ -170,23 +405,25 @@ const l = (e, s) => {
     }
   },
   setup(e) {
-    return (s, t) => (c(), a("div", J, [
-      e.user ? (c(), a("div", Q, [
-        u("h2", null, i(e.user.name), 1),
-        u("p", null, i(e.user.email), 1),
-        u("p", null, i(e.user.phone), 1)
-      ])) : p("", !0)
+    return (s, t) => (a(), n("div", Fe, [
+      e.user ? (a(), n("div", Oe, [
+        r("h2", null, u(e.user.name), 1),
+        r("p", null, u(e.user.email), 1),
+        r("p", null, u(e.user.phone), 1)
+      ])) : h("", !0)
     ]));
   }
-}, te = /* @__PURE__ */ l(R, [["__scopeId", "data-v-e1bf37ef"]]);
+}, Ge = /* @__PURE__ */ _(Pe, [["__scopeId", "data-v-e1bf37ef"]]);
 export {
-  F as Chat,
-  X as ChatInfo,
-  Y as ChatInput,
-  Z as ChatList,
-  w as FileMessage,
-  S as ImageMessage,
-  ee as MessageFeed,
-  te as Profile,
-  A as TextMessage
+  j as Chat,
+  L as Chat2,
+  De as ChatInfo,
+  Ve as ChatInput,
+  Ee as ChatList,
+  Le as ChatList2,
+  Re as Feed,
+  N as FileMessage,
+  Be as ImageMessage,
+  Ge as Profile,
+  Y as TextMessage
 };

package/dist/vuessages.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.vuessages={},c.Vue))})(this,function(c,e){"use strict";const l=(t,n)=>{const s=t.__vccOpts||t;for(const[a,o]of n)s[a]=o;return s},d=l({__name:"Chat",props:{chat:{type:Object,required:!0}},emits:["select"],setup(t,{emit:n}){const s=t,a=n,o=()=>{a("select",s.chat)};return(r,i)=>(e.openBlock(),e.createElementBlock("div",{class:"chat",onClick:o},[e.createElementVNode("p",null,e.toDisplayString(t.chat.name)+" "+e.toDisplayString(t.chat.countUnread),1)]))}},[["__scopeId","data-v-77b8ac34"]]),h={class:"file-message"},g=["href"],_=l({__name:"FileMessage",props:{message:{type:Object,required:!0}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("a",{href:t.message.url,download:""},e.toDisplayString(t.message.filename),9,g)]))}},[["__scopeId","data-v-9fef0716"]]),u={class:"image-message"},k=["src","alt"],p=l({__name:"ImageMessage",props:{message:{type:Object,required:!0}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",u,[e.createElementVNode("img",{src:t.message.url,alt:t.message.alt},null,8,k)]))}},[["__scopeId","data-v-1c1327d6"]]),f=l({__name:"TextMessage",props:{message:{type:Object,required:!0}},setup(t){function n(s){return s.direction==="incoming"?"text-message-left":"text-message-right"}return(s,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(n(t.message))},[e.createElementVNode("p",null,e.toDisplayString(t.message.text),1)],2))}},[["__scopeId","data-v-4deff5d3"]]),y={class:"chat-info"},B={key:0},$=l({__name:"ChatInfo",props:{chat:{type:Object,required:!0}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",y,[t.chat?(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("h2",null,e.toDisplayString(t.chat.name),1)])):e.createCommentVNode("",!0)]))}},[["__scopeId","data-v-7ca4835c"]]),E={class:"chat-input"},C=l({__name:"ChatInput",emits:["send"],setup(t,{emit:n}){const s=n,a=e.ref(""),o=e.ref(null),r=()=>{a.value.trim()&&(s("send",a.value),a.value="",e.unref(o).focus())};return(i,m)=>(e.openBlock(),e.createElementBlock("div",E,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":m[0]||(m[0]=S=>a.value=S),ref_key:"refInput",ref:o,onKeydown:e.withKeys(r,["enter"]),placeholder:"Type a message..."},null,544),[[e.vModelText,a.value]]),e.createElementVNode("button",{onClick:r},"Send")]))}},[["__scopeId","data-v-07719b64"]]),I={class:"chat-list"},M=l({__name:"ChatList",props:{chats:{type:Array,required:!0}},emits:["select"],setup(t,{emit:n}){const s=n,a=o=>{s("select",o)};return(o,r)=>(e.openBlock(),e.createElementBlock("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.chats,i=>(e.openBlock(),e.createBlock(d,{key:i.chatId,chat:i,onSelect:a},null,8,["chat"]))),128))]))}},[["__scopeId","data-v-dda91c95"]]),V=l({__name:"MessageFeed",props:{messages:{type:Array,required:!0}},setup(t){const n=e.ref(null),s=t,a=r=>({"message.text":f,"message.image":p,"message.file":_})[r];function o(){e.nextTick(function(){const r=e.unref(n);r.scrollTop=r.scrollHeight})}return e.watch(()=>s.messages,o),(r,i)=>(e.openBlock(),e.createElementBlock("div",{class:"message-feed",ref_key:"refFeed",ref:n},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.messages,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a(m.type)),{key:m.id,message:m},null,8,["message"]))),128))],512))}},[["__scopeId","data-v-b2d2ed34"]]),b={class:"profile"},x={key:0},N=l({__name:"Profile",props:{user:{type:Object,required:!0}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",b,[t.user?(e.openBlock(),e.createElementBlock("div",x,[e.createElementVNode("h2",null,e.toDisplayString(t.user.name),1),e.createElementVNode("p",null,e.toDisplayString(t.user.email),1),e.createElementVNode("p",null,e.toDisplayString(t.user.phone),1)])):e.createCommentVNode("",!0)]))}},[["__scopeId","data-v-e1bf37ef"]]);c.Chat=d,c.ChatInfo=$,c.ChatInput=C,c.ChatList=M,c.FileMessage=_,c.ImageMessage=p,c.MessageFeed=V,c.Profile=N,c.TextMessage=f,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.vuessages={},l.Vue))})(this,function(l,e){"use strict";const m=(t,a)=>{const s=t.__vccOpts||t;for(const[n,c]of a)s[n]=c;return s},h=m({__name:"Chat",props:{chat:{type:Object,required:!0}},emits:["select"],setup(t,{emit:a}){const s=t,n=a,c=()=>{n("select",s.chat)};return(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"chat",onClick:c},[e.createElementVNode("p",null,e.toDisplayString(t.chat.name)+" "+e.toDisplayString(t.chat.countUnread),1)]))}},[["__scopeId","data-v-77b8ac34"]]),u={class:"avatar"},B=["src"],y={class:"chat-info"},E={class:"name"},C={key:0,class:"last-message"},$={class:"chat-details"},I={key:0,class:"unread"},V={key:1,class:"time"},f=m({__name:"Chat2",props:{chat:{type:Object,required:!0}},emits:["select"],setup(t,{emit:a}){const s=t,n=a,c=()=>{n("select",s.chat)},o=()=>s.chat.isSelected?"chat-item-selected":"chat-item",i=()=>s.chat.avatar?s.chat.avatar:"data:image/svg+xml;base64,"+window.btoa('<svg fill="#000000" width="800px" height="800px" viewBox="0 -2.93 32.537 32.537" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"> <g transform="translate(-481.391 -197.473)"> <path d="M512.928,224.152a.991.991,0,0,1-.676-.264,21.817,21.817,0,0,0-29.2-.349,1,1,0,1,1-1.322-1.5,23.814,23.814,0,0,1,31.875.377,1,1,0,0,1-.677,1.736Z"/> <path d="M498.191,199.473a7.949,7.949,0,1,1-7.949,7.95,7.959,7.959,0,0,1,7.949-7.95m0-2a9.949,9.949,0,1,0,9.95,9.95,9.949,9.949,0,0,0-9.95-9.95Z"/> </g> </g></svg>');return(d,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o()),onClick:c},[e.createElementVNode("div",u,[e.createElementVNode("img",{src:i(),width:"50",height:"50"},null,8,B)]),e.createElementVNode("div",y,[e.createElementVNode("div",E,e.toDisplayString(t.chat.name),1),t.chat.lastMessage?(e.openBlock(),e.createElementBlock("div",C,e.toDisplayString(t.chat.lastMessage),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",$,[t.chat.countUnread>0?(e.openBlock(),e.createElementBlock("div",I,e.toDisplayString(t.chat.countUnread),1)):e.createCommentVNode("",!0),t.chat["lastActivity.time"]?(e.openBlock(),e.createElementBlock("div",V,e.toDisplayString(t.chat["lastActivity.time"]),1)):e.createCommentVNode("",!0)])],2))}},[["__scopeId","data-v-b194d366"]]),N={class:"file-message"},S=["href"],p=m({__name:"FileMessage",props:{message:{type:Object,required:!0}},setup(t){return(a,s)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("a",{href:t.message.url,download:""},e.toDisplayString(t.message.filename),9,S)]))}},[["__scopeId","data-v-18efd407"]]),w=["messageId"],b=["src","alt"],x={class:"message-time"},M=m({__name:"ImageMessage",props:{message:{type:Object,required:!0}},setup(t){const a=t;function s(){return a.message.position==="left"?"image-message-left":"image-message-right"}return(n,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s()),messageId:t.message.messageId},[e.createElementVNode("img",{src:t.message.url,alt:t.message.alt,class:"image-message"},null,8,b),e.createElementVNode("div",x,e.toDisplayString(t.message.time),1)],10,w))}},[["__scopeId","data-v-1f459534"]]),D=["messageId"],U={class:"message-time"},k=m({__name:"TextMessage",props:{message:{type:Object,required:!0}},setup(t){function a(s){return s.position==="left"?"text-message-left":"text-message-right"}return(s,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a(t.message)),messageId:t.message.messageId},[e.createElementVNode("p",null,e.toDisplayString(t.message.text),1),e.createElementVNode("div",U,e.toDisplayString(t.message.time),1)],10,D))}},[["__scopeId","data-v-c807c835"]]),F={class:"chat-info"},j={key:0},q=m({__name:"ChatInfo",props:{chat:{type:Object,required:!0}},setup(t){return(a,s)=>(e.openBlock(),e.createElementBlock("div",F,[t.chat?(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("h2",null,e.toDisplayString(t.chat.name),1)])):e.createCommentVNode("",!0)]))}},[["__scopeId","data-v-7ca4835c"]]),O={class:"chat-input"},A=m({__name:"ChatInput",emits:["send"],setup(t,{emit:a}){const s=a,n=e.ref(""),c=e.ref(null),o=()=>{n.value.trim()&&(s("send",n.value),n.value="",e.unref(c).focus())};return(i,d)=>(e.openBlock(),e.createElementBlock("div",O,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=r=>n.value=r),ref_key:"refInput",ref:c,onKeydown:e.withKeys(o,["enter"]),placeholder:"Type a message..."},null,544),[[e.vModelText,n.value]]),e.createElementVNode("button",{onClick:o},"Send")]))}},[["__scopeId","data-v-07719b64"]]),T={class:"chat-list"},L=m({__name:"ChatList",props:{chats:{type:Array,required:!0}},emits:["select"],setup(t,{emit:a}){const s=t,n=a,c=i=>{n("select",i)},o=()=>s.chats.sort((i,d)=>{if(i.countUnread>d.countUnread)return-1;if(i.countUnread<d.countUnread)return 1;if(i.countUnread==d.countUnread)return 0});return(i,d)=>(e.openBlock(),e.createElementBlock("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o(),r=>(e.openBlock(),e.createBlock(h,{key:r.chatId,chat:r,onSelect:c},null,8,["chat"]))),128))]))}},[["__scopeId","data-v-fafd9097"]]),P={__name:"ChatFilter",emits:["update"],setup(t,{emit:a}){const s=e.ref(""),n=a,c=()=>{const o=e.unref(s);n("update",o.value)};return(o,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("input",{type:"text",ref_key:"refInput",ref:s,onInput:c,placeholder:"Поиск..."},null,544)]))}},z={class:"chat-list"},R=m({__name:"ChatList2",props:{chats:{type:Array,required:!0},filterEnabled:{type:Boolean,required:!0}},emits:["select"],setup(t,{emit:a}){const s=e.ref(""),n=t,c=a,o=r=>{c("select",r),n.chats.forEach(g=>g.isSelected=!1);const _=n.chats.find(g=>g.chatId===r.chatId);_.isSelected=!0},i=()=>n.chats.sort((r,_)=>{if(r.countUnread>_.countUnread)return-1;if(r.countUnread<_.countUnread)return 1;if(r.countUnread==_.countUnread)return 0}).filter(r=>r.name.includes(s.value)),d=r=>{s.value=r};return(r,_)=>(e.openBlock(),e.createElementBlock("div",null,[t.filterEnabled?(e.openBlock(),e.createBlock(P,{key:0,onUpdate:d})):e.createCommentVNode("",!0),e.createElementVNode("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i(),g=>(e.openBlock(),e.createBlock(f,{key:g.chatId,chat:g,onSelect:o},null,8,["chat"]))),128))])]))}},[["__scopeId","data-v-1fd0e46c"]]),G={props:{message:{type:Object,required:!0}},setup(t){return{showPreview:e.ref(!1)}}},K={key:0,class:"message-content"},Z=["src"],H={key:1,class:"preview-container"},J=["src"],Q={class:"message-info"},W={key:0,class:"message-status"},X={key:0,class:"status read"},Y={key:1,class:"status delivered"},v={key:2,class:"status sending"},ee={class:"message-time"};function te(t,a,s,n,c,o){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["message-container",{sent:s.message.isSent,received:!s.message.isSent}])},[n.showPreview?(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("img",{src:s.message.url,alt:"Изображение",class:"preview-image"},null,8,J),a[2]||(a[2]=e.createElementVNode("br",null,null,-1)),e.createElementVNode("button",{onClick:a[1]||(a[1]=i=>n.showPreview=!1)},"Закрыть")])):(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("img",{src:s.message.url,onClick:a[0]||(a[0]=i=>n.showPreview=!0),alt:"Изображение",class:"chat-image"},null,8,Z)])),e.createElementVNode("div",Q,[s.message.isSent?(e.openBlock(),e.createElementBlock("div",W,[s.message.isRead?(e.openBlock(),e.createElementBlock("span",X,"✓")):s.message.isDelivered?(e.openBlock(),e.createElementBlock("span",Y,"✓")):(e.openBlock(),e.createElementBlock("span",v,"..."))])):e.createCommentVNode("",!0),e.createElementVNode("div",ee,e.toDisplayString(s.message.time),1)])],2)}const se=m(G,[["render",te]]),ae={class:"dateMessage"},ne={class:"dateMessage__text"},ce=m({__name:"DateMessage",props:{message:{type:Object}},setup(t){return(a,s)=>(e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("p",ne,e.toDisplayString(t.message.text),1)]))}},[["__scopeId","data-v-2d53fb22"]]),oe=["messageId"],re=["src"],le={class:"message-time"},ie=m({__name:"AudioMessage",props:{message:{type:Object,required:!0}},setup(t){function a(s){return s.position==="left"?"audio-message-left":"audio-message-right"}return(s,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a(t.message)),messageId:t.message.messageId},[e.createElementVNode("audio",{src:t.message.url,controls:""},null,8,re),e.createElementVNode("div",le,e.toDisplayString(t.message.time),1)],10,oe))}},[["__scopeId","data-v-127acb40"]]),de=m({__name:"Feed",props:{objects:{type:Array,required:!0}},setup(t){const a=e.ref(null),s=t,n=o=>({"message.text":k,"message.image":se,"message.file":p,"message.audio":ie,"system.date":ce})[o];function c(){e.nextTick(function(){const o=e.unref(a);o.scrollTop=o.scrollHeight})}return e.onUpdated(()=>c),e.watch(()=>s.objects,c),(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"message-feed",ref_key:"refFeed",ref:a},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.objects,d=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n(d.type)),{key:d.messageId,message:d},null,8,["message"]))),128))],512))}},[["__scopeId","data-v-37208651"]]),me={class:"profile"},_e={key:0},ge=m({__name:"Profile",props:{user:{type:Object,required:!0}},setup(t){return(a,s)=>(e.openBlock(),e.createElementBlock("div",me,[t.user?(e.openBlock(),e.createElementBlock("div",_e,[e.createElementVNode("h2",null,e.toDisplayString(t.user.name),1),e.createElementVNode("p",null,e.toDisplayString(t.user.email),1),e.createElementVNode("p",null,e.toDisplayString(t.user.phone),1)])):e.createCommentVNode("",!0)]))}},[["__scopeId","data-v-e1bf37ef"]]);l.Chat=h,l.Chat2=f,l.ChatInfo=q,l.ChatInput=A,l.ChatList=L,l.ChatList2=R,l.Feed=de,l.FileMessage=p,l.ImageMessage=M,l.Profile=ge,l.TextMessage=k,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobilon-dev/chotto",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "./dist/vuessages.umd.js",
   "module": "./dist/vuessages.es.js",
@@ -25,24 +25,23 @@
   "dependencies": {
     "date-fns": "^4.1.0",
     "pinia": "^2.2.2",
-    "vue": "^3.5.6",
+    "vue": "^3.5.8",
     "vue3-emoji-picker": "^1.1.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-essentials": "^8.3.1",
-    "@storybook/addon-interactions": "^8.3.1",
-    "@storybook/addon-links": "^8.3.1",
-    "@storybook/addon-onboarding": "^8.3.1",
-    "@storybook/blocks": "^8.3.1",
-    "@storybook/test": "^8.3.1",
-    "@storybook/vue3": "^8.3.1",
-    "@storybook/vue3-vite": "^8.3.1",
-    "@types/node": "^22.5.5",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/blocks": "^8.3.2",
+    "@storybook/test": "^8.3.2",
+    "@storybook/vue3": "^8.3.2",
+    "@storybook/vue3-vite": "^8.3.2",
+    "@types/node": "^22.6.1",
     "@vitejs/plugin-vue": "^5.1.4",
-    "storybook": "^8.3.1",
+    "storybook": "^8.3.2",
     "typescript": "^5.6.2",
-    "vite": "^5.4.6",
+    "vite": "^5.4.7",
     "vite-plugin-static-copy": "^1.0.6",
     "vue-tsc": "^2.1.6"
   }