@yonus_amire01/chat 1.0.0 → 2.0.0

package/README.md

@@ -1,4 +1,4 @@
-# @behayand/chat
+# @yonus_amire01/chat
 
 Reusable Vue 3 chat dashboard component extracted from the Behayand frontend.
 
@@ -7,7 +7,7 @@ The package ships a single composed page component (`<ChatPage />`) plus the hos
 ## Install
 
 ```bash
-yarn add @behayand/chat
+yarn add @yonus_amire01/chat
 # peer dependencies
 yarn add vue vue-i18n pinia @vueuse/core
 ```
@@ -19,8 +19,8 @@ yarn add vue vue-i18n pinia @vueuse/core
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { createI18n } from "vue-i18n";
-import { BehayandChat, ChatPage } from "@behayand/chat";
-import "@behayand/chat/style.css";
+import { BehayandChat, ChatPage } from "@yonus_amire01/chat";
+import "@yonus_amire01/chat/style.css";
 
 import App from "./App.vue";
 // Required message keys — see "i18n keys" below.
@@ -46,7 +46,7 @@ Then render `<ChatPage />` anywhere.
 If no `adapter` is passed, `createMockAdapter()` is used so you can preview the UI without a backend.
 
 ```ts
-import type { HostAdapter } from "@behayand/chat";
+import type { HostAdapter } from "@yonus_amire01/chat";
 
 const adapter: HostAdapter = {
   chat: /* ChatAdapter */,
@@ -61,8 +61,8 @@ const adapter: HostAdapter = {
 Create `app/plugins/behayand-chat.ts`:
 
 ```ts
-import { BehayandChat } from "@behayand/chat";
-import "@behayand/chat/style.css";
+import { BehayandChat } from "@yonus_amire01/chat";
+import "@yonus_amire01/chat/style.css";
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(BehayandChat /* , { adapter } */);
@@ -102,7 +102,7 @@ Translations for additional message types (file/voice/request bubbles, medicatio
 
 ## Styles
 
-`import "@behayand/chat/style.css"` ships:
+`import "@yonus_amire01/chat/style.css"` ships:
 
 - Tailwind v4 base + utilities (scoped to the package's class usage),
 - Theme tokens (`--color-primary-*`, `--color-surface`, gradient utilities, etc.),

package/dist/chat.css

@@ -0,0 +1 @@
+@custom-variant dark (&:where(.dark,.dark *));@theme{ --shadow-floating: 0 8px 24px 0 rgba(149, 157, 165, .2); --shadow-medium: 0 0 12px 0 rgba(149, 157, 165, .24); --color-primary-50: #d4f9f5; --color-primary-100: #afeee7; --color-primary-200: #7eded4; --color-primary-300: #59c9be; --color-primary-400: #40b8ac; --color-primary-500: #26a99c; --color-primary-600: #1a9d90; --color-primary-700: #0e9688; --color-primary-800: #047c70; --color-primary-900: #055850; --color-accent-blue-light:#0088FF; --color-accent-blue-dark:#0088FF; --color-secondary-50: #d9ffef; --color-secondary-100: #b3ffe0; --color-secondary-200: #8dfbce; --color-secondary-300: #66efb6; --color-secondary-400: #49dea0; --color-secondary-500: #3ad494; --color-secondary-600: #2ac484; --color-secondary-700: #1daa70; --color-secondary-800: #0b8b55; --color-secondary-900: #0b613d; --color-warning-50: #faf4ea; --color-warning-100: #f8ead0; --color-warning-200: #f3dfbb; --color-warning-300: #e6c892; --color-warning-400: #e2bd7d; --color-warning-500: #d8ac5f; --color-warning-600: #d09f46; --color-warning-700: #bf8d31; --color-warning-800: #a4731a; --color-warning-900: #875b0c; --color-error-50: #fceae8; --color-error-100: #f7bdb7; --color-error-200: #f39d94; --color-error-300: #ee7163; --color-error-400: #ea5545; --color-error-500: #e52b16; --color-error-600: #d02714; --color-error-700: #a31f10; --color-error-800: #7e180c; --color-error-900: #601209; --color-gray-25: #f8f8fa; --color-gray-50: #f0f0f0; --color-gray-100: #d1d0d2; --color-gray-200: #bababc; --color-gray-300: #9b9a9d; --color-gray-400: #87868a; --color-gray-500: #69686d; --color-gray-600: #605f63; --color-gray-700: #4b4a4d; --color-gray-800: #3a393c; --color-gray-900: #2c2c2e; --color-black-50: #e8e8e9; --color-black-100: #b7b8bc; --color-black-200: #94969b; --color-black-300: #64666e; --color-black-400: #393e4d; --color-black-500: #242836; --color-black-600: #151823; --color-black-700: #10121b; --color-black-800: #0d0e15; --color-black-900: #0a0b10; --background-image-gradient-primary: linear-gradient( 30deg, var(--color-primary-600), var(--color-primary-200) ); --background-image-gradient-primary-secondary: linear-gradient( 30deg, var(--color-secondary-500), var(--color-primary-500) ); --background-image-gradient-secondary: linear-gradient( 30deg, var(--color-secondary-600), var(--color-secondary-200) ); --background-image-gradient-warning: linear-gradient( 30deg, var(--color-warning-600), var(--color-warning-200) ); --background-image-gradient-error: linear-gradient( 30deg, var(--color-error-600), var(--color-error-200) ); --background-image-gradient-gray: linear-gradient( 30deg, var(--color-gray-600), var(--color-gray-200) ); --background-image-gradient-black: linear-gradient( 30deg, var(--color-black-700), var(--color-black-400) ); --background-image-gradient-divider: linear-gradient( 90deg, var(--color-gray-25) 0%, var(--color-gray-100) 50%, var(--color-gray-25) 100% ); --background-image-diamond-primary: radial-gradient( circle at 70% 0%, var(--color-primary-600), var(--color-primary-200) ); --background-image-diamond-primary-secondary: radial-gradient( circle at 70% 0%, var(--color-secondary-500), var(--color-primary-500) ); --background-image-diamond-secondary: radial-gradient( circle at 70% 0%, var(--color-secondary-600), var(--color-secondary-200) ); --background-image-diamond-warning: radial-gradient( circle at 70% 0%, var(--color-warning-600), var(--color-warning-200) ); --background-image-diamond-error: radial-gradient( circle at 70% 0%, var(--color-error-600), var(--color-error-200) ); --background-image-diamond-gray: radial-gradient( circle at 70% 0%, var(--color-gray-600), var(--color-gray-200) ); --background-image-diamond-black: radial-gradient( circle at 70% 0%, var(--color-black-700), var(--color-black-400) ); --background-image-diamond-divider: radial-gradient( circle at 70% 0%, var(--color-black-200), var(--color-gray-25) ); --background-image-diamond-surface: radial-gradient( circle at 70% 0%, var(--color-black-700), var(--color-black-400) ); --color-primary: var(--color-primary-600); --color-on-primary: #ffffff; --color-on-primary-container: var(--color-primary-900); --color-primary-container: var(--color-primary-100); --color-secondary: var(--color-secondary-600); --color-on-secondary: #ffffff; --color-secondary-container: var(--color-secondary-100); --color-on-secondary-container: var(--color-secondary-900); --color-warning: var(--color-warning-600); --color-on-warning: #ffffff; --color-warning-container: var(--color-warning-100); --color-on-warning-container: var(--color-secondary-900); --color-error: var(--color-error-500); --color-on-error: #ffffff; --color-error-container: var(--color-error-100); --color-on-error-container: var(--color-secondary-900); --color-surface: #ffffff; --color-on-surface: var(--color-black-900); --color-surface-variant: var(--color-gray-25); --color-on-surface-variant: var(--color-gray-800); --color-surface-variant-2: var(--color-gray-50); --color-surface-variant-3: var(--color-black-50); --color-outline: var(--color-gray-100); --color-outline-variant: var(--color-gray-50); --text-display-lg: 57px; --text-display-lg--line-height: 114px; --text-display-lg--font-weight: 800; --text-display-md: 45px; --text-display-md---line-height: 90px; --text-display-md--font-weight: 800; --text-display-sm: 36px; --text-display-sm--line-height: 72px; --text-display-sm--font-weight: 800; --text-head-lg: 32px; --text-head-lg--line-height: 44px; --text-head-lg--font-weight: 800; --text-head-md: 28px; --text-head-md--line-height: 56px; --text-head-md--font-weight: 800; --text-head-sm: 24px; --text-head-sm--line-height: 48px; --text-head-sm--font-weight: 800; --text-title-lg: 22px; --text-title-lg--line-height: 44px; --text-title-lg--font-weight: 700; --text-title-md: 16px; --text-title-md--line-height: 32px; --text-title-md--font-weight: 700; --text-title-sm: 14px; --text-title-sm--line-height: 28px; --text-title-sm--font-weight: 700; --text-label-lg: 16px; --text-label-lg--line-height: 32px; --text-label-lg--font-weight: 500; --text-label-md: 14px; --text-label-md--line-height: 28px; --text-label-md--font-weight: 500; --text-label-sm: 12px; --text-label-sm--line-height: 24px; --text-label-sm--font-weight: 500; --text-body-lg: 16px; --text-body-lg--line-height: 32px; --text-body-lg--font-weight: 400; --text-body-md: 14px; --text-body-md--line-height: 28px; --text-body-md--font-weight: 400; --text-body-sm: 12px; --text-body-sm--line-height: 24px; --text-body-sm--font-weight: 400; --color-accent:var(--color-accent-blue-light); --color-chat-background: var(--color-surface); --color-chat-surface: var(--color-surface-variant); --color-chat-surface-2: var(--color-surface-variant-2); --color-chat-surface-3: var(--color-surface-variant-3); --color-chat-on-background: var(--color-on-surface); --color-chat-on-surface: var(--color-on-surface-variant); --color-chat-primary: var(--color-primary-600); --color-chat-on-primary: var(--color-on-primary); --color-chat-secondary: var(--color-secondary-600); --color-chat-on-secondary: var(--color-on-secondary); --color-chat-outline: var(--color-outline); --color-chat-outline-variant: var(--color-outline-variant); --color-chat-warning: var(--color-warning); --color-chat-on-warning: var(--color-on-warning); --color-chat-error: var(--color-error); --color-chat-on-error: var(--color-on-error); --color-chat-success: var(--color-secondary); --font-chat-family: "Vazirmatn", system-ui, sans-serif; --text-chat-base: 14px; --text-chat-base--line-height: 24px; --text-chat-base--font-weight: 400; }@layer base{.dark{--color-primary: var(--color-primary-400);--color-on-primary: var(--color-black-900);--color-on-primary-container: var(--color-primary-900);--color-primary-container: var(--color-primary-100);--color-accent:var(--color-accent-blue-dark);--color-secondary: var(--color-secondary-400);--color-on-secondary: var(--color-black-900);--color-secondary-container: var(--color-secondary-900);--color-on-secondary-container: var(--color-secondary-100);--color-warning: var(--color-warning-400);--color-on-warning: var(--color-black-900);--color-warning-container: var(--color-warning-900);--color-on-warning-container: var(--color-warning-100);--color-error: var(--color-error-400);--color-on-error: var(--color-error-900);--color-error-container: var(--color-error-900);--color-on-error-container: var(--color-error-100);--color-surface: var(--color-black-600);--color-on-surface: #ffffff;--color-surface-variant: var(--color-black-500);--color-on-surface-variant: var(--color-gray-50);--color-surface-variant-2: var(--color-black-400);--color-surface-variant-3: var(--color-black-300);--color-outline: var(--color-gray-800);--color-outline-variant: var(--color-gray-900);--color-chat-primary: var(--color-primary-400);--color-chat-secondary: var(--color-secondary-400);--color-chat-warning: var(--color-warning-400);--color-chat-error: var(--color-error-400);--color-chat-success: var(--color-secondary-400);--background-image-diamond-surface: radial-gradient( circle at 70% 0%, var(--color-gray-50), var(--color-gray-200) )}}.glass-effect{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}.glass-effect:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#fff6,#fff0);pointer-events:none}.b-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;transition:all .3s ease-in-out;cursor:pointer;overflow:hidden;border-width:1px;border-style:solid;padding-inline:var(--b-pad-inline);padding-block:var(--b-pad-block);width:var(--b-width);height:var(--b-height);border-radius:var(--b-radius);font-size:var(--b-font-size);background-image:var(--b-bg-image);background-color:var(--b-bg-color);color:var(--b-text);border-color:var(--b-border);--b-hover-overlay: rgba(0, 0, 0, .1)}.b-btn:focus-visible{outline:var(--b-focus-width) solid var(--b-focus-color);outline-offset:var(--b-focus-offset)}:where(.dark) .b-btn{--b-hover-overlay: rgba(255, 255, 255, .1)}.b-btn--fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--b-hover-overlay);opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;z-index:1}.b-btn--fill:hover:not(.is-disabled):after{opacity:1}.b-btn:hover:not(.is-disabled){background-color:var(--b-hover-bg-color);color:var(--b-hover-text);border-color:var(--b-hover-border)}.b-btn:active:not(.is-disabled){background-color:var(--b-active-bg-color);color:var(--b-active-text);border-color:var(--b-active-border);transition:all .1s ease-out}.b-btn--fill:active:not(.is-disabled){filter:brightness(.9)}.b-btn.is-disabled{cursor:not-allowed;background-color:var(--b-disabled-bg-color);color:var(--b-disabled-text);border-color:var(--b-disabled-border);opacity:.65}.b-input{width:100%;box-sizing:border-box;outline:none;transition:background-color .3s ease,border-color .3s ease;height:var(--i-height);border-radius:var(--i-radius);font-size:var(--i-font-size);font-weight:500;background-color:var(--i-bg);color:var(--i-text);border:var(--i-border-width) solid var(--i-border);padding-inline-start:var(--i-pad-start, 12px);padding-inline-end:var(--i-pad-end, 12px)}.b-input:focus{background-color:transparent;border-color:var(--color-primary)}.b-input::placeholder{color:var(--color-on-surface);opacity:.5}.b-input:disabled,.b-input.is-disabled{background-color:var(--i-bg-disabled);border-color:var(--color-outline);cursor:not-allowed;opacity:.6}.hide-scrollbar::-webkit-scrollbar{display:none}[class*=backdrop-blur]{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000;transform:translateZ(0);will-change:backdrop-filter}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.border-diamond{border-color:transparent!important;background-image:linear-gradient(var(--color-surface),var(--color-surface)),var(--background-image-diamond-primary-secondary)!important;background-origin:border-box!important;background-clip:padding-box,border-box!important}.border-gradient-active[data-v-504a314e]{position:relative;border:none!important}.border-gradient-active[data-v-504a314e]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9999px;padding:1px;background:var(--background-image-diamond-primary-secondary);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.icon-expand-enter-active[data-v-504a314e],.icon-expand-leave-active[data-v-504a314e]{transition:width .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.icon-expand-enter-from[data-v-504a314e],.icon-expand-leave-to[data-v-504a314e]{width:0!important;opacity:0;transform:scale(.5)}.popup-el[data-v-cef9d88b]{position:fixed!important;top:0!important;left:0!important}.visible[data-v-cef9d88b]{visibility:visible!important}.invisible[data-v-cef9d88b]{visibility:hidden!important}.b-btn[data-v-066e233c]{position:relative;display:inline-grid;place-items:center;box-sizing:border-box;transition:all .3s ease-in-out;cursor:pointer;overflow:hidden;border-width:1px;border-style:solid;padding-inline:var(--b-pad-inline);padding-block:var(--b-pad-block);width:var(--b-width);height:var(--b-height);border-radius:var(--b-radius);font-size:var(--b-font-size);background-image:var(--b-bg-image);background-color:var(--b-bg-color);color:var(--b-text);border-color:var(--b-border);opacity:var(--b-opacity);--b-hover-overlay: rgba(0, 0, 0, .1)}.b-btn[data-v-066e233c]:focus-visible{outline:var(--b-focus-width) solid var(--b-focus-color);outline-offset:var(--b-focus-offset)}:where(.dark) .b-btn[data-v-066e233c]{--b-hover-overlay: rgba(255, 255, 255, .1)}.b-btn--fill[data-v-066e233c]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--b-hover-overlay);opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;z-index:1}.b-btn--fill[data-v-066e233c]:hover:not(.is-disabled):after{opacity:1}.b-btn__content-wrapper[data-v-066e233c]{z-index:2}.b-btn[data-v-066e233c]:hover:not(.is-disabled){background-color:var(--b-hover-bg-color);color:var(--b-hover-text);border-color:var(--b-hover-border)}.b-btn[data-v-066e233c]:active:not(.is-disabled){background-color:var(--b-active-bg-color);color:var(--b-active-text);border-color:var(--b-active-border);transition:all .1s ease-out}.b-btn--fill[data-v-066e233c]:active:not(.is-disabled){filter:brightness(.9);transition:filter .1s ease-out}.b-btn.is-disabled[data-v-066e233c]{cursor:not-allowed;background-color:var(--b-disabled-bg-color);color:var(--b-disabled-text);border-color:var(--b-disabled-border);opacity:var(--b-disabled-opacity)}.b-btn__ghost-layer[data-v-066e233c]{grid-column:1;grid-row:1;visibility:hidden;display:flex;align-items:center;gap:8px;pointer-events:none}.b-btn__content-wrapper[data-v-066e233c]{grid-column:1;grid-row:1;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.b-btn__content[data-v-066e233c],.b-btn__loading[data-v-066e233c]{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%}.fade-enter-active[data-v-066e233c],.fade-leave-active[data-v-066e233c],.fade-delay-enter-active[data-v-066e233c]{transition:opacity .3s ease;position:absolute}.fade-delay-enter-active[data-v-066e233c]{transition-delay:.1s}.fade-enter-from[data-v-066e233c],.fade-leave-to[data-v-066e233c],.fade-delay-enter-from[data-v-066e233c]{opacity:0}.fade-enter-to[data-v-066e233c],.fade-leave-from[data-v-066e233c],.fade-delay-enter-to[data-v-066e233c]{opacity:100}.bg-gradient-primary-secondary[data-v-afafe070]{min-height:2px;z-index:10}.transition-all[data-v-afafe070]{will-change:left,width}@keyframes slide-out-right-b359429b{0%{transform:scaleY(-1) translate(0);opacity:1}to{transform:scaleY(-1) translate(40px);opacity:0}}@keyframes slide-out-left-b359429b{0%{transform:scaleY(-1) translate(0);opacity:1}to{transform:scaleY(-1) translate(-40px);opacity:0}}.animate-delete-right[data-v-b359429b]{animation:slide-out-right-b359429b .3s ease-in forwards;white-space:nowrap}.animate-delete-left[data-v-b359429b]{animation:slide-out-left-b359429b .3s ease-in forwards;white-space:nowrap}.msg-slide-enter-active[data-v-b359429b]{transition:all .3s ease-out}.msg-slide-enter-from[data-v-b359429b]{opacity:0;transform:translate(20px)}.msg-grow-enter-active[data-v-b359429b]{transition:grid-template-rows .4s ease,opacity .4s ease;display:grid;grid-template-rows:1fr}.msg-grow-enter-from[data-v-b359429b]{grid-template-rows:0fr;opacity:0}.msg-grow-enter-active>div[data-v-b359429b]{overflow:hidden}.flip-vertical[data-v-353b2769]{transform:scaleY(-1);will-change:scroll-position}[data-index][data-v-353b2769]{will-change:transform;backface-visibility:hidden}.hide-scrollbar[data-v-353b2769]::-webkit-scrollbar{display:none}@keyframes slide-in-right-353b2769{0%{opacity:0;transform:scaleY(-1) translate(30px)}to{opacity:1;transform:scaleY(-1) translate(0)}}@keyframes slide-in-left-353b2769{0%{opacity:0;transform:scaleY(-1) translate(-30px)}to{opacity:1;transform:scaleY(-1) translate(0)}}.animate-slide-right[data-v-353b2769]{animation:slide-in-right-353b2769 .3s ease-out forwards;will-change:transform,opacity}.animate-slide-left[data-v-353b2769]{animation:slide-in-left-353b2769 .3s ease-out forwards;will-change:transform,opacity}#list[data-v-353b2769]{will-change:padding-top}.animate-request-in[data-v-353b2769]{animation:request-in-353b2769 .4s ease-out forwards;overflow:hidden;transform:scaleY(-1)}@keyframes request-in-353b2769{0%{opacity:0;max-height:0;transform:scaleY(-1) translateY(10px)}to{opacity:1;max-height:1000px;transform:scaleY(-1) translateY(0)}}.hide-scrollbar[data-v-dd5787a7]{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar[data-v-dd5787a7]::-webkit-scrollbar{display:none}.b-input-wrapper[data-v-26e5263b]{width:100%;max-width:500px;display:flex;flex-direction:column;position:relative}.b-input[data-v-26e5263b]{width:100%;box-sizing:border-box;outline:none;transition:background-color .3s ease,border-color .3s ease;height:var(--i-height);border-radius:var(--i-radius);font-size:var(--i-font-size);font-family:var(--i-font-family);font-weight:500;background-color:var(--i-bg);color:var(--i-text);border:var(--i-border-width) solid var(--i-border);padding-inline-start:var(--i-pad-start);padding-inline-end:var(--i-pad-end)}.b-input.is-focused[data-v-26e5263b]{background-color:transparent;border-color:var(--color-primary)}.b-input--textarea[data-v-26e5263b]{height:var(--i-textarea-height);resize:none;padding-top:var(--i-pad-internal)}.b-input[data-v-26e5263b]::placeholder{color:var(--color-on-surface);opacity:.5}.b-input.is-readonly[data-v-26e5263b]{opacity:.7}.b-input.is-disabled[data-v-26e5263b]{background-color:var(--i-bg-disabled);border-color:var(--color-outline);cursor:not-allowed;opacity:.6}.b-input-slots-wrapper[data-v-26e5263b]{padding-inline:var(--i-pad-internal)}.b-input-prefix[data-v-26e5263b]{display:flex;align-items:center;justify-content:center;font-size:var(--i-font-size);font-weight:500;color:var(--color-on-surface);opacity:.5}.b-input-icon[data-v-26e5263b]{width:var(--i-icon-size);height:var(--i-icon-size);fill:var(--color-on-surface);color:var(--i-icon-color);opacity:.5}.b-input-message-icon[data-v-26e5263b]{width:var(--i-msg-icon-size);height:var(--i-msg-icon-size);fill:currentColor}.b-input-caption[data-v-26e5263b]{padding-top:6px;width:100%;color:var(--color-on-surface);font-size:var(--i-caption-size)}.dropdown-fade-enter-active[data-v-2a25b221],.dropdown-fade-leave-active[data-v-2a25b221]{transition:all .2s ease-in-out}.dropdown-fade-enter-from[data-v-2a25b221],.dropdown-fade-leave-to[data-v-2a25b221]{opacity:0;transform:scaleY(.95)}.hide-scrollbar[data-v-2a25b221]{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar[data-v-2a25b221]::-webkit-scrollbar{display:none}