@forgedevstack/bear 1.3.1 → 1.3.3

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"),q=require("../Button/Button.cjs"),I=require("../Input/Input.cjs"),B=require("../Avatar/Avatar.cjs");require("../Box/Box.cjs");const u=require("../Typography/Typography.cjs"),_=require("../Icon/index.cjs"),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(I.Input,{value:o,onChange:t=>g(t.target.value),onKeyDown:A,placeholder:b,disabled:h||s,className:"flex-1"}),e.jsx(q.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 "../Icon/index.js";
-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
 };

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { ChatBubbleProps as ChatBubbleComponentProps } from '../ChatBubble/ChatBubble.types';
+import { PromptSuggestionItem } from '../PromptSuggestions/PromptSuggestions.types';
 export interface ChatMessage {
     id: string;
     content: string | ReactNode;
@@ -9,48 +11,39 @@ export interface ChatMessage {
     status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
     metadata?: Record<string, unknown>;
 }
+export interface ChatTranslations {
+    placeholder: string;
+    typingText: string;
+    newMessagesLabel: string;
+}
 export interface ChatProps {
     id?: string;
-    /** Array of messages */
+    testId?: string;
     messages: ChatMessage[];
-    /** Callback when user sends a message */
     onSend?: (message: string) => void;
-    /** Loading state (e.g., waiting for bot response) */
+    onStop?: () => void;
+    onAttach?: (files: File[]) => void;
     isLoading?: boolean;
-    /** Placeholder text for input */
+    isStreaming?: boolean;
+    isTyping?: boolean;
     placeholder?: string;
-    /** Chat header content */
     header?: ReactNode;
-    /** Chat footer content (below input) */
     footer?: ReactNode;
-    /** Show timestamps */
     showTimestamps?: boolean;
-    /** Show message status */
     showStatus?: boolean;
-    /** Show avatars */
     showAvatars?: boolean;
-    /** User avatar URL */
     userAvatar?: string;
-    /** Bot avatar URL */
     botAvatar?: string;
-    /** Typing indicator */
-    isTyping?: boolean;
-    /** Typing indicator text */
     typingText?: string;
-    /** Custom class name */
     className?: string;
-    /** Height of the chat container */
     height?: number | string;
-    /** Test ID */
-    testId?: string;
-    /** Disable input */
     disabled?: boolean;
+    allowAttach?: boolean;
+    suggestions?: PromptSuggestionItem[];
+    onSuggestionSelect?: (id: string) => void;
+    errorTitle?: string;
+    errorMessage?: ReactNode;
+    onRetry?: () => void;
+    translations?: Partial<ChatTranslations>;
 }
-export interface ChatBubbleProps {
-    message: ChatMessage;
-    showTimestamp?: boolean;
-    showStatus?: boolean;
-    showAvatar?: boolean;
-    userAvatar?: string;
-    botAvatar?: string;
-}
+export type ChatBubbleProps = ChatBubbleComponentProps;

package/dist/components/Chat/Chat.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/generals.const.cjs"),o=require("./Chat.const.cjs"),n=t=>{const e=typeof t=="number"?`${t}${r.UNIT_PX}`:t;return{[o.CHAT_HEIGHT_VAR]:e}},s=t=>t.scrollHeight-t.scrollTop-t.clientHeight<=o.CHAT_STICK_THRESHOLD;exports.isChatScrollerAtBottom=s;exports.resolveChatHeightVar=n;

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

@@ -0,0 +1,2 @@
+export declare const resolveChatHeightVar: (height: number | string) => Record<string, string>;
+export declare const isChatScrollerAtBottom: (scroller: HTMLElement) => boolean;

package/dist/components/Chat/Chat.utils.js

@@ -0,0 +1,10 @@
+import { UNIT_PX as r } from "../../constants/generals.const.js";
+import { CHAT_HEIGHT_VAR as e, CHAT_STICK_THRESHOLD as n } from "./Chat.const.js";
+const s = (t) => {
+  const o = typeof t == "number" ? `${t}${r}` : t;
+  return { [e]: o };
+}, i = (t) => t.scrollHeight - t.scrollTop - t.clientHeight <= n;
+export {
+  i as isChatScrollerAtBottom,
+  s as resolveChatHeightVar
+};

package/dist/components/Chat/helpers/ChatTypingIndicator.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../Flex/Flex.cjs"),r=require("../../Typography/Typography.cjs"),i=require("../../../constants/numbers.const.cjs"),p=a=>{const{text:o}=a,s=Array.from({length:i.TYPING_DOT_COUNT},(t,c)=>c);return e.jsxs(n.Flex,{className:"Bear-ChatTyping",align:"center",gap:2,children:[e.jsx(n.Flex,{className:"Bear-ChatTyping__dots",align:"center",children:s.map(t=>e.jsx(r.Typography,{component:"span",className:"Bear-ChatTyping__dot"},t))}),e.jsx(r.Typography,{variant:"caption",color:"muted",children:o})]})};exports.ChatTypingIndicator=p;

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

@@ -0,0 +1,3 @@
+export declare const ChatTypingIndicator: (props: {
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/helpers/ChatTypingIndicator.js

@@ -0,0 +1,14 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Flex as a } from "../../Flex/Flex.js";
+import { Typography as o } from "../../Typography/Typography.js";
+import { TYPING_DOT_COUNT as m } from "../../../constants/numbers.const.js";
+const d = (n) => {
+  const { text: e } = n, i = Array.from({ length: m }, (t, p) => p);
+  return /* @__PURE__ */ c(a, { className: "Bear-ChatTyping", align: "center", gap: 2, children: [
+    /* @__PURE__ */ r(a, { className: "Bear-ChatTyping__dots", align: "center", children: i.map((t) => /* @__PURE__ */ r(o, { component: "span", className: "Bear-ChatTyping__dot" }, t)) }),
+    /* @__PURE__ */ r(o, { variant: "caption", color: "muted", children: e })
+  ] });
+};
+export {
+  d as ChatTypingIndicator
+};

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

@@ -1,2 +1,3 @@
 export { Chat } from './Chat';
-export type { ChatProps, ChatMessage, ChatBubbleProps } from './Chat.types';
+export type { ChatMessage, ChatProps, ChatTranslations } from './Chat.types';
+export type { ChatBubbleProps } from '../ChatBubble/ChatBubble.types';

package/dist/components/ChatBubble/ChatBubble.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("../../constants/generals.const.cjs");require("react");const _=require("../../utils/generateBearId.utils.cjs"),b=require("../../utils/useBearId.cjs"),t=require("./ChatBubble.const.cjs"),c=require("./ChatBubble.utils.cjs"),l=require("./helpers/ChatBubbleSystem.cjs"),T=require("./helpers/ChatBubbleThread.cjs"),h=a=>{const{id:u,showTimestamp:n=t.CHAT_BUBBLE_DEFAULT_SHOW_TIMESTAMP,showStatus:B=t.CHAT_BUBBLE_DEFAULT_SHOW_STATUS,showAvatar:o=t.CHAT_BUBBLE_DEFAULT_SHOW_AVATAR,...e}=a,i=b.useBearId(d.COMPONENT_NAME_CHAT_BUBBLE),s=_.resolveBearId(u,i);return c.isChatSystemSender(e.message.sender)?r.jsx(l.ChatBubbleSystem,{id:s,testId:e.testId,message:e.message,className:e.className}):r.jsx(T.ChatBubbleThread,{...e,id:s,domId:s,showTimestamp:n,showStatus:B,showAvatar:o})};exports.ChatBubble=h;

package/dist/components/ChatBubble/ChatBubble.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../constants/generals.const.cjs"),B=_.BOOLEAN_TRUE,T=_.BOOLEAN_TRUE,A=_.BOOLEAN_TRUE,E={sending:"○",sent:"✓",delivered:"✓✓",read:"✓✓",error:"!"},U="U",L="B",H="2-digit";exports.CHAT_BUBBLE_BOT_INITIAL=L;exports.CHAT_BUBBLE_DEFAULT_SHOW_AVATAR=A;exports.CHAT_BUBBLE_DEFAULT_SHOW_STATUS=T;exports.CHAT_BUBBLE_DEFAULT_SHOW_TIMESTAMP=B;exports.CHAT_BUBBLE_STATUS_MARK=E;exports.CHAT_BUBBLE_TIME_DIGIT=H;exports.CHAT_BUBBLE_USER_INITIAL=U;

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

@@ -0,0 +1,13 @@
+export declare const CHAT_BUBBLE_DEFAULT_SHOW_TIMESTAMP = true;
+export declare const CHAT_BUBBLE_DEFAULT_SHOW_STATUS = true;
+export declare const CHAT_BUBBLE_DEFAULT_SHOW_AVATAR = true;
+export declare const CHAT_BUBBLE_STATUS_MARK: {
+    readonly sending: "○";
+    readonly sent: "✓";
+    readonly delivered: "✓✓";
+    readonly read: "✓✓";
+    readonly error: "!";
+};
+export declare const CHAT_BUBBLE_USER_INITIAL = "U";
+export declare const CHAT_BUBBLE_BOT_INITIAL = "B";
+export declare const CHAT_BUBBLE_TIME_DIGIT = "2-digit";

package/dist/components/ChatBubble/ChatBubble.const.js

@@ -0,0 +1,17 @@
+import { BOOLEAN_TRUE as _ } from "../../constants/generals.const.js";
+const T = _, A = _, E = _, U = {
+  sending: "○",
+  sent: "✓",
+  delivered: "✓✓",
+  read: "✓✓",
+  error: "!"
+}, L = "U", o = "B", t = "2-digit";
+export {
+  o as CHAT_BUBBLE_BOT_INITIAL,
+  E as CHAT_BUBBLE_DEFAULT_SHOW_AVATAR,
+  A as CHAT_BUBBLE_DEFAULT_SHOW_STATUS,
+  T as CHAT_BUBBLE_DEFAULT_SHOW_TIMESTAMP,
+  U as CHAT_BUBBLE_STATUS_MARK,
+  t as CHAT_BUBBLE_TIME_DIGIT,
+  L as CHAT_BUBBLE_USER_INITIAL
+};

package/dist/components/ChatBubble/ChatBubble.d.ts

@@ -0,0 +1,2 @@
+import { ChatBubbleProps } from './ChatBubble.types';
+export declare const ChatBubble: (props: ChatBubbleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ChatBubble/ChatBubble.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { COMPONENT_NAME_CHAT_BUBBLE as T } from "../../constants/generals.const.js";
+import "react";
+import { resolveBearId as _ } from "../../utils/generateBearId.utils.js";
+import { useBearId as d } from "../../utils/useBearId.js";
+import { CHAT_BUBBLE_DEFAULT_SHOW_TIMESTAMP as A, CHAT_BUBBLE_DEFAULT_SHOW_STATUS as p, CHAT_BUBBLE_DEFAULT_SHOW_AVATAR as E } from "./ChatBubble.const.js";
+import { isChatSystemSender as S } from "./ChatBubble.utils.js";
+import { ChatBubbleSystem as f } from "./helpers/ChatBubbleSystem.js";
+import { ChatBubbleThread as n } from "./helpers/ChatBubbleThread.js";
+const l = (s) => {
+  const {
+    id: m,
+    showTimestamp: o = A,
+    showStatus: a = p,
+    showAvatar: B = E,
+    ...e
+  } = s, i = d(T), t = _(m, i);
+  return S(e.message.sender) ? /* @__PURE__ */ r(f, { id: t, testId: e.testId, message: e.message, className: e.className }) : /* @__PURE__ */ r(
+    n,
+    {
+      ...e,
+      id: t,
+      domId: t,
+      showTimestamp: o,
+      showStatus: a,
+      showAvatar: B
+    }
+  );
+};
+export {
+  l as ChatBubble
+};