@forgedevstack/bear 1.3.2 → 1.3.3

package/dist/components/Chart/RadarChart.js

@@ -1,100 +1,123 @@
-import { jsx as n, jsxs as T } from "react/jsx-runtime";
-import { ZERO as A, ONE as d } from "../../constants/numbers.const.js";
-import { cn as u } from "../../utils/cn.js";
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { ZERO as m, ONE as f } from "../../constants/numbers.const.js";
+import { cn as A } from "../../utils/cn.js";
 import "react";
-import { CHART as r } from "./Chart.const.js";
-import { polarToCartesian as c, getChartColor as R } from "./Chart.utils.js";
-const $ = (_) => {
+import { resolveBearId as O } from "../../utils/generateBearId.utils.js";
+import { useBearId as $ } from "../../utils/useBearId.js";
+import { CHART as a } from "./Chart.const.js";
+import { polarToCartesian as i, getChartColor as R } from "./Chart.utils.js";
+const P = (g) => {
   const {
-    data: o,
-    height: f = r.DEFAULT_HEIGHT,
-    showLabels: p = !0,
-    showValues: h = !1,
-    animated: b = !0,
-    color: i,
-    className: x,
-    ...y
-  } = _, m = o.length;
-  if (m === A)
-    return null;
-  const g = Math.max(...o.map((e) => e.value), d), s = r.FULL_SWEEP / m, E = o.map((e, a) => {
-    const t = r.DEFAULT_START_ANGLE + a * s, l = e.value / g * r.OUTER_RADIUS;
-    return c(t, l);
-  }), S = E.map((e) => `${e.x},${e.y}`).join(" "), U = Array.from({ length: r.RADAR_RINGS }, (e, a) => {
-    const t = (a + d) / r.RADAR_RINGS * r.OUTER_RADIUS;
-    return Array.from({ length: m }, (l, D) => {
-      const L = r.DEFAULT_START_ANGLE + D * s;
-      return c(L, t);
-    });
-  });
-  return /* @__PURE__ */ n("div", { className: u("Bear-Chart Bear-Chart--radar bear-flex bear-flex-col bear-items-center", x), style: { height: f }, ...y, children: /* @__PURE__ */ T("svg", { viewBox: `0 0 ${r.VIEWBOX} ${r.VIEWBOX}`, className: "bear-h-full bear-w-full", children: [
-    U.map((e, a) => /* @__PURE__ */ n(
-      "polygon",
-      {
-        points: e.map((t) => `${t.x},${t.y}`).join(" "),
-        fill: "none",
-        stroke: "var(--bear-border-default, #e5e5e5)",
-        strokeWidth: 0.4
-      },
-      a
-    )),
-    o.map((e, a) => {
-      const t = r.DEFAULT_START_ANGLE + a * s, l = c(t, r.OUTER_RADIUS);
-      return /* @__PURE__ */ n(
-        "line",
-        {
-          x1: r.CENTER,
-          y1: r.CENTER,
-          x2: l.x,
-          y2: l.y,
-          stroke: "var(--bear-border-default, #e5e5e5)",
-          strokeWidth: 0.4
-        },
-        e.label
-      );
-    }),
-    /* @__PURE__ */ n(
-      "polygon",
+    data: l,
+    height: x = a.DEFAULT_HEIGHT,
+    showLabels: S = !0,
+    showValues: C = !1,
+    animated: I = !0,
+    color: c,
+    className: h,
+    id: N,
+    testId: E,
+    ...p
+  } = g, U = $("RadarChart"), T = O(N, U), d = l.length, _ = { "--Bear-Chart-height": `${x}px` };
+  if (d === m)
+    return /* @__PURE__ */ s(
+      "div",
       {
-        points: S,
-        fill: R(A, i),
-        fillOpacity: 0.25,
-        stroke: R(A, i),
-        strokeWidth: 0.8,
-        className: u(b && "animate-scale-in")
+        id: T,
+        "data-testid": E,
+        className: A("Bear-Chart Bear-Chart--radar Bear-Chart--empty", h),
+        style: _,
+        ...p
       }
-    ),
-    E.map((e, a) => /* @__PURE__ */ n(
-      "circle",
-      {
-        cx: e.x,
-        cy: e.y,
-        r: r.DOT_RADIUS,
-        fill: R(a, o[a].color || i)
-      },
-      o[a].label
-    )),
-    p && o.map((e, a) => {
-      const t = r.DEFAULT_START_ANGLE + a * s, l = c(t, r.OUTER_RADIUS + r.RADAR_LABEL_OFFSET);
-      return /* @__PURE__ */ T(
-        "text",
-        {
-          x: l.x,
-          y: l.y,
-          textAnchor: "middle",
-          dominantBaseline: "middle",
-          className: "bear-fill-[var(--bear-text-secondary)]",
-          fontSize: 4,
-          children: [
-            e.label,
-            h ? ` ${e.value}` : ""
-          ]
-        },
-        `${e.label}-label`
-      );
-    })
-  ] }) });
+    );
+  const B = Math.max(...l.map((e) => e.value), f), n = a.FULL_SWEEP / d, u = l.map((e, r) => {
+    const t = a.DEFAULT_START_ANGLE + r * n, o = e.value / B * a.OUTER_RADIUS;
+    return i(t, o);
+  }), D = u.map((e) => `${e.x},${e.y}`).join(" "), L = Array.from({ length: a.RADAR_RINGS }, (e, r) => {
+    const t = (r + f) / a.RADAR_RINGS * a.OUTER_RADIUS;
+    return Array.from({ length: d }, (o, b) => {
+      const v = a.DEFAULT_START_ANGLE + b * n;
+      return i(v, t);
+    });
+  });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      id: T,
+      "data-testid": E,
+      className: A("Bear-Chart Bear-Chart--radar", h),
+      style: _,
+      ...p,
+      children: /* @__PURE__ */ y("svg", { viewBox: `0 0 ${a.VIEWBOX} ${a.VIEWBOX}`, className: "Bear-Chart__svg", children: [
+        L.map((e, r) => /* @__PURE__ */ s(
+          "polygon",
+          {
+            points: e.map((t) => `${t.x},${t.y}`).join(" "),
+            fill: "none",
+            stroke: "var(--bear-border-default, #e5e5e5)",
+            strokeWidth: 0.4
+          },
+          r
+        )),
+        l.map((e, r) => {
+          const t = a.DEFAULT_START_ANGLE + r * n, o = i(t, a.OUTER_RADIUS);
+          return /* @__PURE__ */ s(
+            "line",
+            {
+              x1: a.CENTER,
+              y1: a.CENTER,
+              x2: o.x,
+              y2: o.y,
+              stroke: "var(--bear-border-default, #e5e5e5)",
+              strokeWidth: 0.4
+            },
+            e.label
+          );
+        }),
+        /* @__PURE__ */ s(
+          "polygon",
+          {
+            points: D,
+            fill: R(m, c),
+            fillOpacity: 0.25,
+            stroke: R(m, c),
+            strokeWidth: 0.8,
+            className: A(I && "animate-scale-in")
+          }
+        ),
+        u.map((e, r) => /* @__PURE__ */ s(
+          "circle",
+          {
+            cx: e.x,
+            cy: e.y,
+            r: a.DOT_RADIUS,
+            fill: R(r, l[r].color || c)
+          },
+          l[r].label
+        )),
+        S && l.map((e, r) => {
+          const t = a.DEFAULT_START_ANGLE + r * n, o = i(t, a.OUTER_RADIUS + a.RADAR_LABEL_OFFSET);
+          return /* @__PURE__ */ y(
+            "text",
+            {
+              x: o.x,
+              y: o.y,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              className: "bear-fill-[var(--bear-text-secondary)]",
+              fontSize: 4,
+              children: [
+                e.label,
+                C ? ` ${e.value}` : ""
+              ]
+            },
+            `${e.label}-label`
+          );
+        })
+      ] })
+    }
+  );
 };
 export {
-  $ as RadarChart
+  P as RadarChart
 };

package/dist/components/Chat/Chat.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),d=require("../../utils/cn.cjs"),D=require("../../context/BearProvider.cjs"),I=require("../Button/Button.cjs"),q=require("../Input/Input.cjs"),B=require("../Avatar/Avatar.cjs");require("../Box/Box.cjs");const u=require("../Typography/Typography.cjs"),_=require("@forgedevstack/bear-icons"),x=require("./Chat.const.cjs"),R=({message:r,showTimestamp:n=!0,showStatus:s=!0,showAvatar:b=!0,userAvatar:y,botAvatar:m})=>{var c;const a=r.sender==="user",f=r.sender==="system",l=x.SENDER_COLORS[r.sender];if(f)return e.jsx("div",{className:"flex justify-center my-2",children:e.jsx(u.Typography,{variant:"caption",className:"px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800",style:{color:l.text},children:r.content})});const v=a?y:m,p=r.status?x.MESSAGE_STATUS_ICONS[r.status]:null;return e.jsxs("div",{className:d.cn("flex gap-2 mb-3",a?"flex-row-reverse":"flex-row"),children:[b&&e.jsx(B.Avatar,{src:v,initials:((c=r.name)==null?void 0:c[0])||(a?"U":"B"),size:"sm",className:"flex-shrink-0"}),e.jsxs("div",{className:d.cn("flex flex-col max-w-[70%]",a?"items-end":"items-start"),children:[r.name&&e.jsx(u.Typography,{variant:"caption",className:"mb-1 opacity-60",children:r.name}),e.jsx("div",{className:d.cn("px-4 py-2 rounded-2xl",a?"rounded-br-sm":"rounded-bl-sm"),style:{backgroundColor:l.bg,color:l.text},children:typeof r.content=="string"?e.jsx(u.Typography,{variant:"body2",children:r.content}):r.content}),e.jsxs("div",{className:"flex items-center gap-1 mt-1",children:[n&&r.timestamp&&e.jsx(u.Typography,{variant:"caption",className:"opacity-50 text-xs",children:r.timestamp.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}),s&&p&&a&&e.jsx("span",{className:d.cn("text-xs",r.status==="read"?"text-blue-500":"opacity-50",r.status==="error"&&"text-red-500"),children:p})]})]})]})},H=({text:r=x.CHAT_DEFAULTS.TYPING_TEXT})=>e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsxs("div",{className:"flex gap-1 px-4 py-3 bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-bl-sm",children:[e.jsx("span",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"0ms"}}),e.jsx("span",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"150ms"}}),e.jsx("span",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"300ms"}})]}),e.jsx(u.Typography,{variant:"caption",className:"opacity-50",children:r})]}),U=({messages:r,onSend:n,isLoading:s=!1,placeholder:b=x.CHAT_DEFAULTS.PLACEHOLDER,header:y,footer:m,showTimestamps:a=!0,showStatus:f=!0,showAvatars:l=!0,userAvatar:v,botAvatar:p,isTyping:c=!1,typingText:C,className:S,height:j=x.CHAT_DEFAULTS.HEIGHT,testId:w,disabled:h=!1})=>{const{mode:E}=D.useBear(),k=E==="dark",[o,g]=i.useState(""),T=i.useRef(null);i.useEffect(()=>{var t;(t=T.current)==null||t.scrollIntoView({behavior:"smooth"})},[r,c]);const N=i.useCallback(()=>{o.trim()&&n&&!h&&!s&&(n(o.trim()),g(""))},[o,n,h,s]),A=i.useCallback(t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),N())},[N]);return e.jsxs("div",{className:d.cn("Bear-Chat","flex flex-col rounded-xl overflow-hidden border",k?"bg-gray-900 border-gray-700":"bg-white border-gray-200",S),style:{height:typeof j=="number"?`${j}px`:j},"data-testid":w,children:[y&&e.jsx("div",{className:"px-4 py-3 border-b border-gray-200 dark:border-gray-700",children:y}),e.jsxs("div",{className:"flex-1 overflow-y-auto p-4",children:[r.map(t=>e.jsx(R,{message:t,showTimestamp:a,showStatus:f,showAvatar:l,userAvatar:v,botAvatar:p},t.id)),c&&e.jsx(H,{text:C}),e.jsx("div",{ref:T})]}),e.jsxs("div",{className:"p-3 border-t border-gray-200 dark:border-gray-700",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsx(q.Input,{value:o,onChange:t=>g(t.target.value),onKeyDown:A,placeholder:b,disabled:h||s,className:"flex-1"}),e.jsx(I.Button,{variant:"primary",onClick:N,disabled:!o.trim()||h||s,children:e.jsx(_.BearIcons.SendIcon,{size:18})})]}),m&&e.jsx("div",{className:"mt-2",children:m})]})]})};exports.Chat=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),r=require("../../constants/generals.const.cjs"),Z=require("../../utils/cn.cjs"),$=require("../../utils/generateBearId.utils.cjs"),ee=require("../../utils/useBearId.cjs"),te=require("../../utils/liveRegion.utils.cjs"),o=require("../Box/Box.cjs"),se=require("../Button/Button.cjs"),re=require("../ChatBubble/ChatBubble.cjs"),oe=require("../ChatError/ChatError.cjs"),ne=require("../PromptComposer/PromptComposer.cjs"),ae=require("../PromptSuggestions/PromptSuggestions.cjs"),n=require("./Chat.const.cjs"),S=require("./Chat.utils.cjs"),ce=require("./helpers/ChatTypingIndicator.cjs"),ie=E=>{const{id:C,testId:p,messages:c,onSend:L,onStop:O,onAttach:x,isLoading:N=r.BOOLEAN_FALSE,isStreaming:f=r.BOOLEAN_FALSE,isTyping:R=r.BOOLEAN_FALSE,placeholder:q,header:T,footer:H,showTimestamps:I=n.CHAT_DEFAULT_SHOW_TIMESTAMPS,showStatus:j=n.CHAT_DEFAULT_SHOW_STATUS,showAvatars:v=n.CHAT_DEFAULT_SHOW_AVATARS,userAvatar:F,botAvatar:b,typingText:y,className:w,height:U=n.CHAT_DEFAULTS.HEIGHT,disabled:P=n.CHAT_DEFAULT_DISABLED,allowAttach:D,suggestions:l,onSuggestionSelect:M,errorTitle:W,errorMessage:g,onRetry:V,translations:k}=E,z=ee.useBearId(r.COMPONENT_NAME_CHAT),G=$.resolveBearId(C,z),u=a.useRef(null),h=a.useRef(r.BOOLEAN_TRUE),A=a.useRef(null),[J,d]=a.useState(r.BOOLEAN_FALSE),_={...n.CHAT_DEFAULT_TRANSLATIONS,...k},B=f||N,s=c[c.length-1],K=B&&typeof(s==null?void 0:s.content)=="string"?s.content:void 0,Q=te.getBearLiveRegionProps("info"),m=()=>{const e=u.current;e&&(e.scrollTop=e.scrollHeight,h.current=r.BOOLEAN_TRUE,d(r.BOOLEAN_FALSE))},X=()=>{const e=u.current;if(!e)return;const i=S.isChatScrollerAtBottom(e);h.current=i,i&&d(r.BOOLEAN_FALSE)};return a.useEffect(()=>{const e=(s==null?void 0:s.id)??null,i=A.current===null,Y=e!==null&&e!==A.current;if(A.current=e,!!Y){if(i||h.current){m();return}d(r.BOOLEAN_TRUE)}},[c,s==null?void 0:s.id]),t.jsxs(o.Box,{id:G,"data-testid":p,className:Z.cn("Bear-Chat",w),style:S.resolveChatHeightVar(U),children:[T&&t.jsx(o.Box,{className:"Bear-Chat__header",children:T}),t.jsxs(o.Box,{ref:u,className:"Bear-Chat__messages",onScroll:X,children:[t.jsx(o.Box,{className:"Bear-Chat__live",...Q,children:K}),c.map(e=>t.jsx(re.ChatBubble,{message:e,showTimestamp:I,showStatus:j,showAvatar:v,userAvatar:F,botAvatar:b},e.id)),R&&!B&&t.jsx(ce.ChatTypingIndicator,{text:y??_.typingText}),g&&t.jsx(oe.ChatError,{title:W,onRetry:V,children:g}),J&&t.jsx(se.Button,{type:"button",variant:"primary",size:"sm",className:"Bear-Chat__new-messages",onClick:m,children:_.newMessagesLabel})]}),l&&l.length>0&&t.jsx(o.Box,{className:"Bear-Chat__suggestions",children:t.jsx(ae.PromptSuggestions,{suggestions:l,onSelect:M})}),t.jsxs(o.Box,{className:"Bear-Chat__composer",children:[t.jsx(ne.PromptComposer,{onSubmit:L,onStop:O,onAttach:x,isStreaming:B,disabled:P,allowAttach:D,placeholder:q??_.placeholder}),H]})]})};exports.Chat=ie;

package/dist/components/Chat/Chat.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={PLACEHOLDER:"Type a message...",HEIGHT:400,TYPING_TEXT:"is typing..."},t={sending:"○",sent:"✓",delivered:"✓✓",read:"✓✓",error:"!"},r={user:{bg:"var(--bear-primary-500)",text:"white"},bot:{bg:"var(--bear-bg-secondary)",text:"var(--bear-text-primary)"},system:{bg:"transparent",text:"var(--bear-text-tertiary, var(--bear-text-muted))"}};exports.CHAT_DEFAULTS=e;exports.MESSAGE_STATUS_ICONS=t;exports.SENDER_COLORS=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../constants/numbers.const.cjs"),T=require("../../constants/generals.const.cjs"),A={PLACEHOLDER:T.PLACEHOLDER_START_TYPING,HEIGHT:_.FOUR_HUNDRED,TYPING_TEXT:"is typing..."},E={placeholder:A.PLACEHOLDER,typingText:A.TYPING_TEXT,newMessagesLabel:T.LABEL_NEW_MESSAGES},H=_.CHAT_STICK_THRESHOLD_PX,S=T.BOOLEAN_TRUE,L=T.BOOLEAN_TRUE,C=T.BOOLEAN_TRUE,D=T.BOOLEAN_FALSE,O="--Bear-Chat-height";exports.CHAT_DEFAULTS=A;exports.CHAT_DEFAULT_DISABLED=D;exports.CHAT_DEFAULT_SHOW_AVATARS=C;exports.CHAT_DEFAULT_SHOW_STATUS=L;exports.CHAT_DEFAULT_SHOW_TIMESTAMPS=S;exports.CHAT_DEFAULT_TRANSLATIONS=E;exports.CHAT_HEIGHT_VAR=O;exports.CHAT_STICK_THRESHOLD=H;

package/dist/components/Chat/Chat.const.d.ts

@@ -1,26 +1,13 @@
+import { ChatTranslations } from './Chat.types';
 export declare const CHAT_DEFAULTS: {
-    readonly PLACEHOLDER: "Type a message...";
+    readonly PLACEHOLDER: "Start typing...";
     readonly HEIGHT: 400;
     readonly TYPING_TEXT: "is typing...";
 };
-export declare const MESSAGE_STATUS_ICONS: {
-    readonly sending: "○";
-    readonly sent: "✓";
-    readonly delivered: "✓✓";
-    readonly read: "✓✓";
-    readonly error: "!";
-};
-export declare const SENDER_COLORS: {
-    readonly user: {
-        readonly bg: "var(--bear-primary-500)";
-        readonly text: "white";
-    };
-    readonly bot: {
-        readonly bg: "var(--bear-bg-secondary)";
-        readonly text: "var(--bear-text-primary)";
-    };
-    readonly system: {
-        readonly bg: "transparent";
-        readonly text: "var(--bear-text-tertiary, var(--bear-text-muted))";
-    };
-};
+export declare const CHAT_DEFAULT_TRANSLATIONS: ChatTranslations;
+export declare const CHAT_STICK_THRESHOLD = 16;
+export declare const CHAT_DEFAULT_SHOW_TIMESTAMPS = true;
+export declare const CHAT_DEFAULT_SHOW_STATUS = true;
+export declare const CHAT_DEFAULT_SHOW_AVATARS = true;
+export declare const CHAT_DEFAULT_DISABLED = false;
+export declare const CHAT_HEIGHT_VAR = "--Bear-Chat-height";

package/dist/components/Chat/Chat.const.js

@@ -1,29 +1,21 @@
-const e = {
-  PLACEHOLDER: "Type a message...",
-  HEIGHT: 400,
+import { FOUR_HUNDRED as _, CHAT_STICK_THRESHOLD_PX as E } from "../../constants/numbers.const.js";
+import { BOOLEAN_TRUE as T, BOOLEAN_FALSE as H, LABEL_NEW_MESSAGES as L, PLACEHOLDER_START_TYPING as S } from "../../constants/generals.const.js";
+const A = {
+  PLACEHOLDER: S,
+  HEIGHT: _,
   TYPING_TEXT: "is typing..."
-}, r = {
-  sending: "○",
-  sent: "✓",
-  delivered: "✓✓",
-  read: "✓✓",
-  error: "!"
-}, t = {
-  user: {
-    bg: "var(--bear-primary-500)",
-    text: "white"
-  },
-  bot: {
-    bg: "var(--bear-bg-secondary)",
-    text: "var(--bear-text-primary)"
-  },
-  system: {
-    bg: "transparent",
-    text: "var(--bear-text-tertiary, var(--bear-text-muted))"
-  }
-};
+}, D = {
+  placeholder: A.PLACEHOLDER,
+  typingText: A.TYPING_TEXT,
+  newMessagesLabel: L
+}, o = E, O = T, s = T, R = T, n = H, e = "--Bear-Chat-height";
 export {
-  e as CHAT_DEFAULTS,
-  r as MESSAGE_STATUS_ICONS,
-  t as SENDER_COLORS
+  A as CHAT_DEFAULTS,
+  n as CHAT_DEFAULT_DISABLED,
+  R as CHAT_DEFAULT_SHOW_AVATARS,
+  s as CHAT_DEFAULT_SHOW_STATUS,
+  O as CHAT_DEFAULT_SHOW_TIMESTAMPS,
+  D as CHAT_DEFAULT_TRANSLATIONS,
+  e as CHAT_HEIGHT_VAR,
+  o as CHAT_STICK_THRESHOLD
 };

package/dist/components/Chat/Chat.d.ts

@@ -1,21 +1,2 @@
-import { FC } from 'react';
 import { ChatProps } from './Chat.types';
-/**
- * Chat - Chat interface component
- *
- * @example
- * ```tsx
- * const [messages, setMessages] = useState<ChatMessage[]>([
- *   { id: '1', content: 'Hello!', sender: 'bot', timestamp: new Date() },
- * ]);
- *
- * <Chat
- *   messages={messages}
- *   onSend={(msg) => setMessages([...messages, { id: Date.now().toString(), content: msg, sender: 'user' }])}
- *   isTyping={false}
- *   showAvatars
- * />
- * ```
- */
-export declare const Chat: FC<ChatProps>;
-export default Chat;
+export declare const Chat: (props: ChatProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/Chat.js

@@ -1,180 +1,125 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { useState as B, useRef as R, useEffect as _, useCallback as k } from "react";
-import { cn as d } from "../../utils/cn.js";
-import { useBear as H } from "../../context/BearProvider.js";
-import { Button as O } from "../Button/Button.js";
-import { Input as U } from "../Input/Input.js";
-import { Avatar as j } from "../Avatar/Avatar.js";
-import "../Box/Box.js";
-import { Typography as m } from "../Typography/Typography.js";
-import { BearIcons as G } from "@forgedevstack/bear-icons";
-import { CHAT_DEFAULTS as g, SENDER_COLORS as K, MESSAGE_STATUS_ICONS as V } from "./Chat.const.js";
-const z = ({
-  message: e,
-  showTimestamp: o = !0,
-  showStatus: l = !0,
-  showAvatar: b = !0,
-  userAvatar: u,
-  botAvatar: p
-}) => {
-  var s;
-  const n = e.sender === "user", h = e.sender === "system", i = K[e.sender];
-  if (h)
-    return /* @__PURE__ */ r("div", { className: "flex justify-center my-2", children: /* @__PURE__ */ r(
-      m,
-      {
-        variant: "caption",
-        className: "px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800",
-        style: { color: i.text },
-        children: e.content
+import { jsxs as A, jsx as r } from "react/jsx-runtime";
+import { useRef as T, useState as Z, useEffect as $ } from "react";
+import { BOOLEAN_FALSE as o, COMPONENT_NAME_CHAT as tt, BOOLEAN_TRUE as u } from "../../constants/generals.const.js";
+import { cn as et } from "../../utils/cn.js";
+import { resolveBearId as rt } from "../../utils/generateBearId.utils.js";
+import { useBearId as ot } from "../../utils/useBearId.js";
+import { getBearLiveRegionProps as st } from "../../utils/liveRegion.utils.js";
+import { Box as s } from "../Box/Box.js";
+import { Button as nt } from "../Button/Button.js";
+import { ChatBubble as at } from "../ChatBubble/ChatBubble.js";
+import { ChatError as it } from "../ChatError/ChatError.js";
+import { PromptComposer as lt } from "../PromptComposer/PromptComposer.js";
+import { PromptSuggestions as ct } from "../PromptSuggestions/PromptSuggestions.js";
+import { CHAT_DEFAULT_SHOW_TIMESTAMPS as mt, CHAT_DEFAULT_SHOW_STATUS as ht, CHAT_DEFAULT_SHOW_AVATARS as pt, CHAT_DEFAULTS as dt, CHAT_DEFAULT_DISABLED as At, CHAT_DEFAULT_TRANSLATIONS as Tt } from "./Chat.const.js";
+import { resolveChatHeightVar as ut, isChatScrollerAtBottom as ft } from "./Chat.utils.js";
+import { ChatTypingIndicator as _t } from "./helpers/ChatTypingIndicator.js";
+const Dt = (S) => {
+  const {
+    id: C,
+    testId: B,
+    messages: n,
+    onSend: E,
+    onStop: N,
+    onAttach: H,
+    isLoading: L = o,
+    isStreaming: v = o,
+    isTyping: I = o,
+    placeholder: w,
+    header: f,
+    footer: O,
+    showTimestamps: R = mt,
+    showStatus: y = ht,
+    showAvatars: b = pt,
+    userAvatar: x,
+    botAvatar: D,
+    typingText: F,
+    className: U,
+    height: P = dt.HEIGHT,
+    disabled: M = At,
+    allowAttach: W,
+    suggestions: i,
+    onSuggestionSelect: j,
+    errorTitle: V,
+    errorMessage: _,
+    onRetry: k,
+    translations: z
+  } = S, G = ot(tt), q = rt(C, G), l = T(null), c = T(u), m = T(null), [J, h] = Z(o), p = { ...Tt, ...z }, d = v || L, e = n[n.length - 1], K = d && typeof (e == null ? void 0 : e.content) == "string" ? e.content : void 0, Q = st("info"), g = () => {
+    const t = l.current;
+    t && (t.scrollTop = t.scrollHeight, c.current = u, h(o));
+  }, X = () => {
+    const t = l.current;
+    if (!t)
+      return;
+    const a = ft(t);
+    c.current = a, a && h(o);
+  };
+  return $(() => {
+    const t = (e == null ? void 0 : e.id) ?? null, a = m.current === null, Y = t !== null && t !== m.current;
+    if (m.current = t, !!Y) {
+      if (a || c.current) {
+        g();
+        return;
       }
-    ) });
-  const x = n ? u : p, f = e.status ? V[e.status] : null;
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: d(
-        "flex gap-2 mb-3",
-        n ? "flex-row-reverse" : "flex-row"
-      ),
-      children: [
-        b && /* @__PURE__ */ r(
-          j,
-          {
-            src: x,
-            initials: ((s = e.name) == null ? void 0 : s[0]) || (n ? "U" : "B"),
-            size: "sm",
-            className: "flex-shrink-0"
-          }
-        ),
-        /* @__PURE__ */ a("div", { className: d("flex flex-col max-w-[70%]", n ? "items-end" : "items-start"), children: [
-          e.name && /* @__PURE__ */ r(m, { variant: "caption", className: "mb-1 opacity-60", children: e.name }),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              className: d(
-                "px-4 py-2 rounded-2xl",
-                n ? "rounded-br-sm" : "rounded-bl-sm"
-              ),
-              style: {
-                backgroundColor: i.bg,
-                color: i.text
-              },
-              children: typeof e.content == "string" ? /* @__PURE__ */ r(m, { variant: "body2", children: e.content }) : e.content
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: "flex items-center gap-1 mt-1", children: [
-            o && e.timestamp && /* @__PURE__ */ r(m, { variant: "caption", className: "opacity-50 text-xs", children: e.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }),
-            l && f && n && /* @__PURE__ */ r(
-              "span",
-              {
-                className: d(
-                  "text-xs",
-                  e.status === "read" ? "text-blue-500" : "opacity-50",
-                  e.status === "error" && "text-red-500"
-                ),
-                children: f
-              }
-            )
-          ] })
-        ] })
-      ]
+      h(u);
     }
-  );
-}, L = ({ text: e = g.TYPING_TEXT }) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-3", children: [
-  /* @__PURE__ */ a("div", { className: "flex gap-1 px-4 py-3 bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-bl-sm", children: [
-    /* @__PURE__ */ r("span", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
-    /* @__PURE__ */ r("span", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
-    /* @__PURE__ */ r("span", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
-  ] }),
-  /* @__PURE__ */ r(m, { variant: "caption", className: "opacity-50", children: e })
-] }), ee = ({
-  messages: e,
-  onSend: o,
-  isLoading: l = !1,
-  placeholder: b = g.PLACEHOLDER,
-  header: u,
-  footer: p,
-  showTimestamps: n = !0,
-  showStatus: h = !0,
-  showAvatars: i = !0,
-  userAvatar: x,
-  botAvatar: f,
-  isTyping: s = !1,
-  typingText: C,
-  className: S,
-  height: v = g.HEIGHT,
-  testId: T,
-  disabled: y = !1
-}) => {
-  const { mode: D } = H(), I = D === "dark", [c, w] = B(""), E = R(null);
-  _(() => {
-    var t;
-    (t = E.current) == null || t.scrollIntoView({ behavior: "smooth" });
-  }, [e, s]);
-  const N = k(() => {
-    c.trim() && o && !y && !l && (o(c.trim()), w(""));
-  }, [c, o, y, l]), A = k((t) => {
-    t.key === "Enter" && !t.shiftKey && (t.preventDefault(), N());
-  }, [N]);
-  return /* @__PURE__ */ a(
-    "div",
+  }, [n, e == null ? void 0 : e.id]), /* @__PURE__ */ A(
+    s,
     {
-      className: d(
-        "Bear-Chat",
-        "flex flex-col rounded-xl overflow-hidden border",
-        I ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200",
-        S
-      ),
-      style: { height: typeof v == "number" ? `${v}px` : v },
-      "data-testid": T,
+      id: q,
+      "data-testid": B,
+      className: et("Bear-Chat", U),
+      style: ut(P),
       children: [
-        u && /* @__PURE__ */ r("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: u }),
-        /* @__PURE__ */ a("div", { className: "flex-1 overflow-y-auto p-4", children: [
-          e.map((t) => /* @__PURE__ */ r(
-            z,
+        f && /* @__PURE__ */ r(s, { className: "Bear-Chat__header", children: f }),
+        /* @__PURE__ */ A(s, { ref: l, className: "Bear-Chat__messages", onScroll: X, children: [
+          /* @__PURE__ */ r(s, { className: "Bear-Chat__live", ...Q, children: K }),
+          n.map((t) => /* @__PURE__ */ r(
+            at,
             {
               message: t,
-              showTimestamp: n,
-              showStatus: h,
-              showAvatar: i,
+              showTimestamp: R,
+              showStatus: y,
+              showAvatar: b,
               userAvatar: x,
-              botAvatar: f
+              botAvatar: D
             },
             t.id
           )),
-          s && /* @__PURE__ */ r(L, { text: C }),
-          /* @__PURE__ */ r("div", { ref: E })
+          I && !d && /* @__PURE__ */ r(_t, { text: F ?? p.typingText }),
+          _ && /* @__PURE__ */ r(it, { title: V, onRetry: k, children: _ }),
+          J && /* @__PURE__ */ r(
+            nt,
+            {
+              type: "button",
+              variant: "primary",
+              size: "sm",
+              className: "Bear-Chat__new-messages",
+              onClick: g,
+              children: p.newMessagesLabel
+            }
+          )
         ] }),
-        /* @__PURE__ */ a("div", { className: "p-3 border-t border-gray-200 dark:border-gray-700", children: [
-          /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ r(
-              U,
-              {
-                value: c,
-                onChange: (t) => w(t.target.value),
-                onKeyDown: A,
-                placeholder: b,
-                disabled: y || l,
-                className: "flex-1"
-              }
-            ),
-            /* @__PURE__ */ r(
-              O,
-              {
-                variant: "primary",
-                onClick: N,
-                disabled: !c.trim() || y || l,
-                children: /* @__PURE__ */ r(G.SendIcon, { size: 18 })
-              }
-            )
-          ] }),
-          p && /* @__PURE__ */ r("div", { className: "mt-2", children: p })
+        i && i.length > 0 && /* @__PURE__ */ r(s, { className: "Bear-Chat__suggestions", children: /* @__PURE__ */ r(ct, { suggestions: i, onSelect: j }) }),
+        /* @__PURE__ */ A(s, { className: "Bear-Chat__composer", children: [
+          /* @__PURE__ */ r(
+            lt,
+            {
+              onSubmit: E,
+              onStop: N,
+              onAttach: H,
+              isStreaming: d,
+              disabled: M,
+              allowAttach: W,
+              placeholder: w ?? p.placeholder
+            }
+          ),
+          O
         ] })
       ]
     }
   );
 };
 export {
-  ee as Chat
+  Dt as Chat
 };