@katechat/ui 1.0.6 → 1.0.8

package/dist/esm/index.js

@@ -57372,22 +57372,6 @@ var CopyMessageButton = ({
   /* @__PURE__ */ React2.createElement(IconCopy, null)
 )), /* @__PURE__ */ React2.createElement(ActionIcon, { disabled: true, size: "sm", className: "check-icon" }, /* @__PURE__ */ React2.createElement(IconCopyCheck, null)));
 
-// src/components/chat/message/ChatMessage.module.scss
-var ChatMessage_module_default = {
-  "messageContainer": "_messageContainer_bxv2j_1",
-  "main": "_main_bxv2j_7",
-  "linked": "_linked_bxv2j_8",
-  "linkedToggle": "_linkedToggle_bxv2j_19",
-  "hidden": "_hidden_bxv2j_41",
-  "linkedMessageContainer": "_linkedMessageContainer_bxv2j_45",
-  "message": "_message_bxv2j_1",
-  "preview": "_preview_bxv2j_82",
-  "detailsBlock": "_detailsBlock_bxv2j_91",
-  "messageFooter": "_messageFooter_bxv2j_251",
-  "user": "_user_bxv2j_277",
-  "error": "_error_bxv2j_282"
-};
-
 // src/components/chat/message/ChatMessage.Carousel.module.scss
 var ChatMessage_Carousel_module_default = {
   "controls": "_controls_pp1ia_1"
@@ -57501,7 +57485,7 @@ var ChatMessage = (props) => {
   const mainMessage = useMemo(() => {
     const plugins = pluginsLoader ? pluginsLoader(message) : null;
     const model = models?.find((m) => m.modelId === message?.modelId);
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Group, { align: "center" }, /* @__PURE__ */ React3.createElement(Avatar, { color: "gray", radius: "xl", size: "md", src: isUserMessage ? message?.user?.avatarUrl : void 0 }, isUserMessage ? /* @__PURE__ */ React3.createElement(IconUser, null) : model ? /* @__PURE__ */ React3.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ React3.createElement(IconRobot, null)), /* @__PURE__ */ React3.createElement(Group, { gap: "xs" }, /* @__PURE__ */ React3.createElement(Text, { size: "sm", fw: 500, c: isUserMessage ? "blue" : "teal" }, username), /* @__PURE__ */ React3.createElement(Text, { size: "xs", c: "dimmed" }, timestamp), status && /* @__PURE__ */ React3.createElement(MessageStatus, { status }), statusInfo && /* @__PURE__ */ React3.createElement(Text, { size: "xs", c: "dimmed" }, statusInfo))), /* @__PURE__ */ React3.createElement("div", { className: ChatMessage_module_default.message }, streaming && !content && /* @__PURE__ */ React3.createElement(Loader, { size: "md", mb: "md" }), html2 ? html2.map((part, index2) => /* @__PURE__ */ React3.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ React3.createElement("div", null, content), details && /* @__PURE__ */ React3.createElement(Box, { mt: "md" }, /* @__PURE__ */ React3.createElement(Group, { mb: 5 }, /* @__PURE__ */ React3.createElement(Button, { onClick: toggleDetails, p: "xs", variant: "light", size: "xs" }, "Details")), /* @__PURE__ */ React3.createElement(Collapse, { in: showDetails }, /* @__PURE__ */ React3.createElement("div", { className: ChatMessage_module_default.detailsBlock }, details))), /* @__PURE__ */ React3.createElement("div", { className: ChatMessage_module_default.messageFooter }, /* @__PURE__ */ React3.createElement(CopyMessageButton, { messageId: id, messageIndex: index }), plugins)));
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Group, { align: "center" }, /* @__PURE__ */ React3.createElement(Avatar, { color: "gray", radius: "xl", size: "md", src: isUserMessage ? message?.user?.avatarUrl : void 0 }, isUserMessage ? /* @__PURE__ */ React3.createElement(IconUser, null) : model ? /* @__PURE__ */ React3.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ React3.createElement(IconRobot, null)), /* @__PURE__ */ React3.createElement(Group, { gap: "xs" }, /* @__PURE__ */ React3.createElement(Text, { size: "sm", fw: 500, c: isUserMessage ? "blue" : "teal" }, username), /* @__PURE__ */ React3.createElement(Text, { size: "xs", c: "dimmed" }, timestamp), status && /* @__PURE__ */ React3.createElement(MessageStatus, { status }), statusInfo && /* @__PURE__ */ React3.createElement(Text, { size: "xs", c: "dimmed" }, statusInfo))), /* @__PURE__ */ React3.createElement("div", { className: "katechat-message-content" }, streaming && !content && /* @__PURE__ */ React3.createElement(Loader, { size: "md", mb: "md" }), html2 ? html2.map((part, index2) => /* @__PURE__ */ React3.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ React3.createElement("div", null, content), details && /* @__PURE__ */ React3.createElement(Box, { mt: "md" }, /* @__PURE__ */ React3.createElement(Group, { mb: 5 }, /* @__PURE__ */ React3.createElement(Button, { onClick: toggleDetails, p: "xs", variant: "light", size: "xs" }, "Details")), /* @__PURE__ */ React3.createElement(Collapse, { in: showDetails }, /* @__PURE__ */ React3.createElement("div", { className: "katechat-message-content-details" }, details))), /* @__PURE__ */ React3.createElement("div", { className: "katechat-message-footer" }, /* @__PURE__ */ React3.createElement(CopyMessageButton, { messageId: id, messageIndex: index }), plugins)));
   }, [
     role,
     username,
@@ -57544,9 +57528,9 @@ var ChatMessage = (props) => {
     );
   }, [linkedMessages, models, pluginsLoader, index]);
   if (!linkedMessagesCmp) {
-    return /* @__PURE__ */ React3.createElement("div", { className: [ChatMessage_module_default.messageContainer, ChatMessage_module_default[role] || ""].join(" "), ref: componentRef }, /* @__PURE__ */ React3.createElement("div", { className: ChatMessage_module_default.main }, mainMessage));
+    return /* @__PURE__ */ React3.createElement("div", { className: ["katechat-message", `katechat-message__${role || ""}`].join(" "), ref: componentRef }, /* @__PURE__ */ React3.createElement("div", { className: "katechat-message-main" }, mainMessage));
   }
-  return /* @__PURE__ */ React3.createElement("div", { className: [ChatMessage_module_default.messageContainer, ChatMessage_module_default[role] || ""].join(" "), ref: componentRef }, /* @__PURE__ */ React3.createElement("div", { className: ChatMessage_module_default.linkedToggle }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: ["katechat-message", `katechat-message__${role || ""}`].join(" "), ref: componentRef }, /* @__PURE__ */ React3.createElement("div", { className: "katechat-message-linked-toggle" }, /* @__PURE__ */ React3.createElement(
     Switch,
     {
       checked: showMainMessage,
@@ -57554,7 +57538,7 @@ var ChatMessage = (props) => {
       label: showMainMessage ? "Main" : "Others",
       size: "sm"
     }
-  )), /* @__PURE__ */ React3.createElement("div", { className: [ChatMessage_module_default.main, showMainMessage ? "" : ChatMessage_module_default.hidden].join(" ") }, mainMessage), /* @__PURE__ */ React3.createElement("div", { className: [ChatMessage_module_default.linked, showMainMessage ? ChatMessage_module_default.hidden : ""].join(" ") }, linkedMessagesCmp));
+  )), /* @__PURE__ */ React3.createElement("div", { className: ["katechat-message-main", showMainMessage ? "" : "hidden"].join(" ") }, mainMessage), /* @__PURE__ */ React3.createElement("div", { className: ["katechat-message-linked", showMainMessage ? "hidden" : ""].join(" ") }, linkedMessagesCmp));
 };
 ChatMessage.displayName = "ChatMessage";
 
@@ -57562,7 +57546,15 @@ ChatMessage.displayName = "ChatMessage";
 import React4 from "react";
 import { ScrollArea } from "@mantine/core";
 var ChatMessagePreview = ({ html: html2, text: text2 }) => {
-  return /* @__PURE__ */ React4.createElement(ScrollArea, { type: "hover", offsetScrollbars: true, className: [ChatMessage_module_default.message, ChatMessage_module_default.preview].join(" ") }, text2 ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, html2 ? html2.map((part, index) => /* @__PURE__ */ React4.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ React4.createElement("div", null, text2)) : "...");
+  return /* @__PURE__ */ React4.createElement(
+    ScrollArea,
+    {
+      type: "hover",
+      offsetScrollbars: true,
+      className: ["katechat-message-content", "katechat-message-preview"].join(" ")
+    },
+    text2 ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, html2 ? html2.map((part, index) => /* @__PURE__ */ React4.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ React4.createElement("div", null, text2)) : "..."
+  );
 };
 
 // src/components/chat/message/LinkedChatMessage.tsx
@@ -57618,7 +57610,7 @@ var LinkedChatMessage = ({ message, parentIndex, index, plugins, models }) => {
   const model = useMemo2(() => {
     return models?.find((m) => m.modelId === message.modelId);
   }, [models, message.modelId]);
-  return /* @__PURE__ */ React6.createElement(Carousel2.Slide, { key: message.id, className: ChatMessage_module_default.linkedMessageContainer }, /* @__PURE__ */ React6.createElement(Group2, { align: "center" }, /* @__PURE__ */ React6.createElement(Avatar2, { radius: "xl", size: "md" }, model ? /* @__PURE__ */ React6.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ React6.createElement(IconRobot2, null)), /* @__PURE__ */ React6.createElement(Group2, { gap: "xs" }, /* @__PURE__ */ React6.createElement(Text2, { size: "sm", fw: 500, c: "teal" }, message.modelName), message.status && /* @__PURE__ */ React6.createElement(MessageStatus, { status: message.status }), message.statusInfo && /* @__PURE__ */ React6.createElement(Text2, { size: "xs", c: "dimmed" }, message.statusInfo))), /* @__PURE__ */ React6.createElement("div", { className: ChatMessage_module_default.message }, message.html ? message.html.map((part, index2) => /* @__PURE__ */ React6.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ React6.createElement("div", null, message.content), /* @__PURE__ */ React6.createElement("div", { className: ChatMessage_module_default.messageFooter }, /* @__PURE__ */ React6.createElement(CopyMessageButton, { messageId: message.id, messageIndex: parentIndex, linkedMessageIndex: index }), plugins)));
+  return /* @__PURE__ */ React6.createElement(Carousel2.Slide, { key: message.id, className: "katechat-message-linked" }, /* @__PURE__ */ React6.createElement(Group2, { align: "center" }, /* @__PURE__ */ React6.createElement(Avatar2, { radius: "xl", size: "md" }, model ? /* @__PURE__ */ React6.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ React6.createElement(IconRobot2, null)), /* @__PURE__ */ React6.createElement(Group2, { gap: "xs" }, /* @__PURE__ */ React6.createElement(Text2, { size: "sm", fw: 500, c: "teal" }, message.modelName), message.status && /* @__PURE__ */ React6.createElement(MessageStatus, { status: message.status }), message.statusInfo && /* @__PURE__ */ React6.createElement(Text2, { size: "xs", c: "dimmed" }, message.statusInfo))), /* @__PURE__ */ React6.createElement("div", { className: "katechat-message-content" }, message.html ? message.html.map((part, index2) => /* @__PURE__ */ React6.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ React6.createElement("div", null, message.content), /* @__PURE__ */ React6.createElement("div", { className: "katechat-message-footer" }, /* @__PURE__ */ React6.createElement(CopyMessageButton, { messageId: message.id, messageIndex: parentIndex, linkedMessageIndex: index }), plugins)));
 };
 LinkedChatMessage.displayName = "LinkedChatMessage";
 
@@ -58142,7 +58134,7 @@ var ChatMessagesList = ({
 
 // src/components/chat/ChatMessagesContainer.tsx
 import React12, { useCallback as useCallback6, useEffect as useEffect7, useImperativeHandle, useRef as useRef6, useState as useState4 } from "react";
-import { Group as Group7, Loader as Loader2 } from "@mantine/core";
+import { Group as Group6, Loader as Loader2 } from "@mantine/core";
 import { IconCircleChevronDown } from "@tabler/icons-react";
 
 // src/hooks/useIntersectionObserver.ts
@@ -58208,18 +58200,6 @@ var useTheme = () => {
   return context;
 };
 
-// src/components/chat/ChatMessagesContainer.module.scss
-var ChatMessagesContainer_module_default = {
-  "messagesContainer": "_messagesContainer_b8239_2",
-  "messagesList": "_messagesList_b8239_19",
-  "empty": "_empty_b8239_23",
-  "scroller": "_scroller_b8239_12",
-  "loadCompleted": "_loadCompleted_b8239_31",
-  "anchorContainer": "_anchorContainer_b8239_41",
-  "visible": "_visible_b8239_55",
-  "anchor": "_anchor_b8239_41"
-};
-
 // src/components/chat/ChatMessagesContainer.tsx
 var ChatMessagesContainer = React12.forwardRef(
   ({
@@ -58292,12 +58272,12 @@ var ChatMessagesContainer = React12.forwardRef(
       "div",
       {
         className: [
-          ChatMessagesContainer_module_default.messagesContainer,
-          loadCompleted ? ChatMessagesContainer_module_default.loadCompleted : "",
-          loadCompleted && messages?.length === 0 ? ChatMessagesContainer_module_default.empty : ""
+          "katechat-messages-container",
+          loadCompleted ? "container--load-completed" : "",
+          loadCompleted && messages?.length === 0 ? "container--empty" : ""
         ].join(" ")
       },
-      /* @__PURE__ */ React12.createElement("div", { className: ChatMessagesContainer_module_default.scroller, ref: messagesContainerRef, onScroll: handleScroll }, /* @__PURE__ */ React12.createElement("div", { ref: firstMessageRef }), loading && /* @__PURE__ */ React12.createElement(Group7, { justify: "center", align: "center", py: "xl" }, /* @__PURE__ */ React12.createElement(Loader2, null)), /* @__PURE__ */ React12.createElement("div", { className: ChatMessagesContainer_module_default.messagesList }, messages && /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React12.createElement("div", { className: "katechat-messages-container-scroller", ref: messagesContainerRef, onScroll: handleScroll }, /* @__PURE__ */ React12.createElement("div", { ref: firstMessageRef }), loading && /* @__PURE__ */ React12.createElement(Group6, { justify: "center", align: "center", py: "xl" }, /* @__PURE__ */ React12.createElement(Loader2, null)), /* @__PURE__ */ React12.createElement("div", { className: "katechat-messages-list" }, messages && /* @__PURE__ */ React12.createElement(
         ChatMessagesList,
         {
           messages,
@@ -58308,7 +58288,7 @@ var ChatMessagesContainer = React12.forwardRef(
           detailsPlugins
         }
       ))),
-      /* @__PURE__ */ React12.createElement("div", { className: [ChatMessagesContainer_module_default.anchorContainer, showAnchorButton ? ChatMessagesContainer_module_default.visible : ""].join(" ") }, /* @__PURE__ */ React12.createElement("div", { className: ChatMessagesContainer_module_default.anchor }, /* @__PURE__ */ React12.createElement(IconCircleChevronDown, { size: 32, color: "teal", style: { cursor: "pointer" }, onClick: anchorHandleClick })))
+      /* @__PURE__ */ React12.createElement("div", { className: ["katechat-anchor-container", showAnchorButton ? "container--visible" : ""].join(" ") }, /* @__PURE__ */ React12.createElement("div", { className: "katechat-anchor" }, /* @__PURE__ */ React12.createElement(IconCircleChevronDown, { size: 32, color: "teal", onClick: anchorHandleClick })))
     );
   }
 );