@forgedevstack/bear 1.3.2 → 1.3.4

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
 };

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
+};

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

@@ -0,0 +1,12 @@
+import { ChatMessage } from '../Chat/Chat.types';
+export interface ChatBubbleProps {
+    id?: string;
+    testId?: string;
+    message: ChatMessage;
+    showTimestamp?: boolean;
+    showStatus?: boolean;
+    showAvatar?: boolean;
+    userAvatar?: string;
+    botAvatar?: string;
+    className?: string;
+}

package/dist/components/ChatBubble/ChatBubble.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./ChatBubble.const.cjs"),r=e=>e==="user",o=e=>e==="system",i=(e,n,a)=>e.avatar?e.avatar:r(e.sender)?n:a,u=e=>e.name?e.name[0]:r(e.sender)?t.CHAT_BUBBLE_USER_INITIAL:t.CHAT_BUBBLE_BOT_INITIAL,B=e=>{if(e)return e.toLocaleTimeString([],{hour:t.CHAT_BUBBLE_TIME_DIGIT,minute:t.CHAT_BUBBLE_TIME_DIGIT})};exports.formatChatBubbleTime=B;exports.isChatSystemSender=o;exports.isChatUserSender=r;exports.resolveChatBubbleAvatar=i;exports.resolveChatBubbleInitial=u;

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

@@ -0,0 +1,6 @@
+import { ChatMessage } from '../Chat/Chat.types';
+export declare const isChatUserSender: (sender: ChatMessage["sender"]) => sender is "user";
+export declare const isChatSystemSender: (sender: ChatMessage["sender"]) => sender is "system";
+export declare const resolveChatBubbleAvatar: (message: ChatMessage, userAvatar?: string, botAvatar?: string) => string | undefined;
+export declare const resolveChatBubbleInitial: (message: ChatMessage) => string;
+export declare const formatChatBubbleTime: (timestamp?: Date) => string | undefined;

package/dist/components/ChatBubble/ChatBubble.utils.js

@@ -0,0 +1,15 @@
+import { CHAT_BUBBLE_TIME_DIGIT as t, CHAT_BUBBLE_USER_INITIAL as a, CHAT_BUBBLE_BOT_INITIAL as B } from "./ChatBubble.const.js";
+const e = (r) => r === "user", u = (r) => r === "system", I = (r, n, o) => r.avatar ? r.avatar : e(r.sender) ? n : o, T = (r) => r.name ? r.name[0] : e(r.sender) ? a : B, _ = (r) => {
+  if (r)
+    return r.toLocaleTimeString([], {
+      hour: t,
+      minute: t
+    });
+};
+export {
+  _ as formatChatBubbleTime,
+  u as isChatSystemSender,
+  e as isChatUserSender,
+  I as resolveChatBubbleAvatar,
+  T as resolveChatBubbleInitial
+};

package/dist/components/ChatBubble/helpers/ChatBubbleSystem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../Flex/Flex.cjs"),u=require("../../Typography/Typography.cjs"),l=require("../../../utils/cn.cjs");require("react");const b=t=>{const{id:r,testId:s,message:a,className:n}=t;return e.jsx(c.Flex,{id:r,testId:s,className:l.cn("Bear-ChatBubble","Bear-ChatBubble--system",n),justify:"center",children:e.jsx(u.Typography,{variant:"caption",className:"Bear-ChatBubble__bubble",children:a.content})})};exports.ChatBubbleSystem=b;

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

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

package/dist/components/ChatBubble/helpers/ChatBubbleSystem.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Flex as o } from "../../Flex/Flex.js";
+import { Typography as b } from "../../Typography/Typography.js";
+import { cn as c } from "../../../utils/cn.js";
+import "react";
+const u = (t) => {
+  const { id: r, testId: a, message: s, className: m } = t;
+  return /* @__PURE__ */ e(
+    o,
+    {
+      id: r,
+      testId: a,
+      className: c("Bear-ChatBubble", "Bear-ChatBubble--system", m),
+      justify: "center",
+      children: /* @__PURE__ */ e(b, { variant: "caption", className: "Bear-ChatBubble__bubble", children: s.content })
+    }
+  );
+};
+export {
+  u as ChatBubbleSystem
+};

package/dist/components/ChatBubble/helpers/ChatBubbleThread.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),_=require("../../Avatar/Avatar.cjs"),l=require("../../../utils/cn.cjs");require("react");require("../../Box/Box.cjs");const r=require("../../Flex/Flex.cjs"),t=require("../../Typography/Typography.cjs"),v=require("../ChatBubble.const.cjs"),s=require("../ChatBubble.utils.cjs"),y=o=>{const{domId:u,testId:c,message:e,showTimestamp:b,showStatus:h,showAvatar:d,userAvatar:m,botAvatar:B,className:p}=o,C=s.isChatUserSender(e.sender),n=s.formatChatBubbleTime(e.timestamp),i=e.status?v.CHAT_BUBBLE_STATUS_MARK[e.status]:void 0;return a.jsxs(r.Flex,{id:u,testId:c,className:l.cn("Bear-ChatBubble",`Bear-ChatBubble--${e.sender}`,p),align:"start",gap:2,children:[d&&a.jsx(_.Avatar,{src:s.resolveChatBubbleAvatar(e,m,B),initials:s.resolveChatBubbleInitial(e),size:"sm"}),a.jsxs(r.Flex,{className:"Bear-ChatBubble__body",direction:"column",gap:1,children:[e.name&&a.jsx(t.Typography,{variant:"caption",color:"muted",children:e.name}),a.jsx(t.Typography,{variant:"body2",className:"Bear-ChatBubble__bubble",children:e.content}),a.jsxs(r.Flex,{className:"Bear-ChatBubble__meta",align:"center",gap:1,children:[b&&n&&a.jsx(t.Typography,{variant:"caption",color:"muted",children:n}),h&&i&&C&&a.jsx(t.Typography,{variant:"caption",className:l.cn("Bear-ChatBubble__status",e.status&&`Bear-ChatBubble__status--${e.status}`),children:i})]})]})]})};exports.ChatBubbleThread=y;

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

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

package/dist/components/ChatBubble/helpers/ChatBubbleThread.js

@@ -0,0 +1,63 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { Avatar as _ } from "../../Avatar/Avatar.js";
+import { cn as m } from "../../../utils/cn.js";
+import "react";
+import "../../Box/Box.js";
+import { Flex as s } from "../../Flex/Flex.js";
+import { Typography as e } from "../../Typography/Typography.js";
+import { CHAT_BUBBLE_STATUS_MARK as v } from "../ChatBubble.const.js";
+import { isChatUserSender as f, formatChatBubbleTime as A, resolveChatBubbleInitial as g, resolveChatBubbleAvatar as T } from "../ChatBubble.utils.js";
+const M = (l) => {
+  const {
+    domId: n,
+    testId: b,
+    message: a,
+    showTimestamp: c,
+    showStatus: u,
+    showAvatar: h,
+    userAvatar: d,
+    botAvatar: B,
+    className: p
+  } = l, C = f(a.sender), o = A(a.timestamp), i = a.status ? v[a.status] : void 0;
+  return /* @__PURE__ */ r(
+    s,
+    {
+      id: n,
+      testId: b,
+      className: m("Bear-ChatBubble", `Bear-ChatBubble--${a.sender}`, p),
+      align: "start",
+      gap: 2,
+      children: [
+        h && /* @__PURE__ */ t(
+          _,
+          {
+            src: T(a, d, B),
+            initials: g(a),
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ r(s, { className: "Bear-ChatBubble__body", direction: "column", gap: 1, children: [
+          a.name && /* @__PURE__ */ t(e, { variant: "caption", color: "muted", children: a.name }),
+          /* @__PURE__ */ t(e, { variant: "body2", className: "Bear-ChatBubble__bubble", children: a.content }),
+          /* @__PURE__ */ r(s, { className: "Bear-ChatBubble__meta", align: "center", gap: 1, children: [
+            c && o && /* @__PURE__ */ t(e, { variant: "caption", color: "muted", children: o }),
+            u && i && C && /* @__PURE__ */ t(
+              e,
+              {
+                variant: "caption",
+                className: m(
+                  "Bear-ChatBubble__status",
+                  a.status && `Bear-ChatBubble__status--${a.status}`
+                ),
+                children: i
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  M as ChatBubbleThread
+};

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

@@ -0,0 +1,2 @@
+export { ChatBubble } from './ChatBubble';
+export type { ChatBubbleProps } from './ChatBubble.types';