@mobilon-dev/chotto 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 mobilon-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# chotto
+Vue3 Chat UI - собери свой интерфейс чата
+
+# использование
+
+## документация
+
+- ссылка
+
+## схема
+
+![](images/scheme.png)
+
+## пример
+
+- ссылка
+
+## скриншот
+
+![](images/screenshot1.png)
+
+
+
+# разработка
+
+
+## install
+
+> npm i
+
+## run storybook
+
+> npm run storybook
+
+## build
+
+> npm run build

package/dist/style.css

@@ -0,0 +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}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/vuessages.es.js

@@ -0,0 +1,192 @@
+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) => {
+  const t = e.__vccOpts || e;
+  for (const [n, r] of s)
+    t[n] = r;
+  return t;
+}, q = {
+  __name: "Chat",
+  props: {
+    chat: {
+      type: Object,
+      required: !0
+    }
+  },
+  emits: ["select"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, r = () => {
+      n("select", t.chat);
+    };
+    return (o, d) => (c(), a("div", {
+      class: "chat",
+      onClick: r
+    }, [
+      u("p", null, i(e.chat.name) + " " + i(e.chat.countUnread), 1)
+    ]));
+  }
+}, F = /* @__PURE__ */ l(q, [["__scopeId", "data-v-77b8ac34"]]), O = { class: "file-message" }, T = ["href"], j = {
+  __name: "FileMessage",
+  props: {
+    message: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    return (s, t) => (c(), a("div", O, [
+      u("a", {
+        href: e.message.url,
+        download: ""
+      }, i(e.message.filename), 9, T)
+    ]));
+  }
+}, w = /* @__PURE__ */ l(j, [["__scopeId", "data-v-9fef0716"]]), B = { class: "image-message" }, D = ["src", "alt"], L = {
+  __name: "ImageMessage",
+  props: {
+    message: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    return (s, t) => (c(), a("div", B, [
+      u("img", {
+        src: e.message.url,
+        alt: e.message.alt
+      }, null, 8, D)
+    ]));
+  }
+}, S = /* @__PURE__ */ l(L, [["__scopeId", "data-v-1c1327d6"]]), V = {
+  __name: "TextMessage",
+  props: {
+    message: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    function s(t) {
+      return t.direction === "incoming" ? "text-message-left" : "text-message-right";
+    }
+    return (t, n) => (c(), a("div", {
+      class: x(s(e.message))
+    }, [
+      u("p", null, i(e.message.text), 1)
+    ], 2));
+  }
+}, A = /* @__PURE__ */ l(V, [["__scopeId", "data-v-4deff5d3"]]), E = { class: "chat-info" }, K = { key: 0 }, N = {
+  __name: "ChatInfo",
+  props: {
+    chat: {
+      type: Object,
+      required: !0
+    }
+  },
+  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)
+    ]));
+  }
+}, X = /* @__PURE__ */ l(N, [["__scopeId", "data-v-7ca4835c"]]), P = { class: "chat-input" }, U = {
+  __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());
+    };
+    return (d, _) => (c(), a("div", P, [
+      I(u("input", {
+        "onUpdate:modelValue": _[0] || (_[0] = (y) => n.value = y),
+        ref_key: "refInput",
+        ref: r,
+        onKeydown: C(o, ["enter"]),
+        placeholder: "Type a message..."
+      }, null, 544), [
+        [$, n.value]
+      ]),
+      u("button", { onClick: o }, "Send")
+    ]));
+  }
+}, Y = /* @__PURE__ */ l(U, [["__scopeId", "data-v-07719b64"]]), z = { class: "chat-list" }, H = {
+  __name: "ChatList",
+  props: {
+    chats: {
+      type: Array,
+      required: !0
+    }
+  },
+  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, {
+        key: d.chatId,
+        chat: d,
+        onSelect: n
+      }, null, 8, ["chat"]))), 128))
+    ]));
+  }
+}, Z = /* @__PURE__ */ l(H, [["__scopeId", "data-v-dda91c95"]]), G = {
+  __name: "MessageFeed",
+  props: {
+    messages: {
+      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;
+      });
+    }
+    return k(() => t.messages, r), (o, d) => (c(), a("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: _
+      }, null, 8, ["message"]))), 128))
+    ], 512));
+  }
+}, ee = /* @__PURE__ */ l(G, [["__scopeId", "data-v-b2d2ed34"]]), J = { class: "profile" }, Q = { key: 0 }, R = {
+  __name: "Profile",
+  props: {
+    user: {
+      type: Object,
+      required: !0
+    }
+  },
+  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)
+    ]));
+  }
+}, te = /* @__PURE__ */ l(R, [["__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
+};

package/dist/vuessages.umd.js

@@ -0,0 +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"})});

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@mobilon-dev/chotto",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/vuessages.umd.js",
+  "module": "./dist/vuessages.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vuessages.es.js",
+      "require": "./dist/vuessages.umd.js"
+    },
+    "./style.css": "./dist/vuessages.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o docs"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "pinia": "^2.2.2",
+    "vue": "^3.5.6",
+    "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",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "storybook": "^8.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
+    "vite-plugin-static-copy": "^1.0.6",
+    "vue-tsc": "^2.1.6"
+  }
+}