@katechat/ui 1.0.6 → 1.0.7

package/dist/cjs/index.js

@@ -57407,22 +57407,6 @@ var CopyMessageButton = ({
   /* @__PURE__ */ import_react2.default.createElement(import_icons_react.IconCopy, null)
 )), /* @__PURE__ */ import_react2.default.createElement(import_core2.ActionIcon, { disabled: true, size: "sm", className: "check-icon" }, /* @__PURE__ */ import_react2.default.createElement(import_icons_react.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"
@@ -57536,7 +57520,7 @@ var ChatMessage = (props) => {
   const mainMessage = (0, import_react3.useMemo)(() => {
     const plugins = pluginsLoader ? pluginsLoader(message) : null;
     const model = models?.find((m) => m.modelId === message?.modelId);
-    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_core3.Group, { align: "center" }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Avatar, { color: "gray", radius: "xl", size: "md", src: isUserMessage ? message?.user?.avatarUrl : void 0 }, isUserMessage ? /* @__PURE__ */ import_react3.default.createElement(import_icons_react2.IconUser, null) : model ? /* @__PURE__ */ import_react3.default.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ import_react3.default.createElement(import_icons_react2.IconRobot, null)), /* @__PURE__ */ import_react3.default.createElement(import_core3.Group, { gap: "xs" }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Text, { size: "sm", fw: 500, c: isUserMessage ? "blue" : "teal" }, username), /* @__PURE__ */ import_react3.default.createElement(import_core3.Text, { size: "xs", c: "dimmed" }, timestamp), status && /* @__PURE__ */ import_react3.default.createElement(MessageStatus, { status }), statusInfo && /* @__PURE__ */ import_react3.default.createElement(import_core3.Text, { size: "xs", c: "dimmed" }, statusInfo))), /* @__PURE__ */ import_react3.default.createElement("div", { className: ChatMessage_module_default.message }, streaming && !content && /* @__PURE__ */ import_react3.default.createElement(import_core3.Loader, { size: "md", mb: "md" }), html2 ? html2.map((part, index2) => /* @__PURE__ */ import_react3.default.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ import_react3.default.createElement("div", null, content), details && /* @__PURE__ */ import_react3.default.createElement(import_core3.Box, { mt: "md" }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Group, { mb: 5 }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Button, { onClick: toggleDetails, p: "xs", variant: "light", size: "xs" }, "Details")), /* @__PURE__ */ import_react3.default.createElement(import_core3.Collapse, { in: showDetails }, /* @__PURE__ */ import_react3.default.createElement("div", { className: ChatMessage_module_default.detailsBlock }, details))), /* @__PURE__ */ import_react3.default.createElement("div", { className: ChatMessage_module_default.messageFooter }, /* @__PURE__ */ import_react3.default.createElement(CopyMessageButton, { messageId: id, messageIndex: index }), plugins)));
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_core3.Group, { align: "center" }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Avatar, { color: "gray", radius: "xl", size: "md", src: isUserMessage ? message?.user?.avatarUrl : void 0 }, isUserMessage ? /* @__PURE__ */ import_react3.default.createElement(import_icons_react2.IconUser, null) : model ? /* @__PURE__ */ import_react3.default.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ import_react3.default.createElement(import_icons_react2.IconRobot, null)), /* @__PURE__ */ import_react3.default.createElement(import_core3.Group, { gap: "xs" }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Text, { size: "sm", fw: 500, c: isUserMessage ? "blue" : "teal" }, username), /* @__PURE__ */ import_react3.default.createElement(import_core3.Text, { size: "xs", c: "dimmed" }, timestamp), status && /* @__PURE__ */ import_react3.default.createElement(MessageStatus, { status }), statusInfo && /* @__PURE__ */ import_react3.default.createElement(import_core3.Text, { size: "xs", c: "dimmed" }, statusInfo))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "katechat-message-content" }, streaming && !content && /* @__PURE__ */ import_react3.default.createElement(import_core3.Loader, { size: "md", mb: "md" }), html2 ? html2.map((part, index2) => /* @__PURE__ */ import_react3.default.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ import_react3.default.createElement("div", null, content), details && /* @__PURE__ */ import_react3.default.createElement(import_core3.Box, { mt: "md" }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Group, { mb: 5 }, /* @__PURE__ */ import_react3.default.createElement(import_core3.Button, { onClick: toggleDetails, p: "xs", variant: "light", size: "xs" }, "Details")), /* @__PURE__ */ import_react3.default.createElement(import_core3.Collapse, { in: showDetails }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "katechat-message-content-details" }, details))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "katechat-message-footer" }, /* @__PURE__ */ import_react3.default.createElement(CopyMessageButton, { messageId: id, messageIndex: index }), plugins)));
   }, [
     role,
     username,
@@ -57579,9 +57563,9 @@ var ChatMessage = (props) => {
     );
   }, [linkedMessages, models, pluginsLoader, index]);
   if (!linkedMessagesCmp) {
-    return /* @__PURE__ */ import_react3.default.createElement("div", { className: [ChatMessage_module_default.messageContainer, ChatMessage_module_default[role] || ""].join(" "), ref: componentRef }, /* @__PURE__ */ import_react3.default.createElement("div", { className: ChatMessage_module_default.main }, mainMessage));
+    return /* @__PURE__ */ import_react3.default.createElement("div", { className: ["katechat-message", `katechat-message__${role || ""}`].join(" "), ref: componentRef }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "katechat-message-main" }, mainMessage));
   }
-  return /* @__PURE__ */ import_react3.default.createElement("div", { className: [ChatMessage_module_default.messageContainer, ChatMessage_module_default[role] || ""].join(" "), ref: componentRef }, /* @__PURE__ */ import_react3.default.createElement("div", { className: ChatMessage_module_default.linkedToggle }, /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement("div", { className: ["katechat-message", `katechat-message__${role || ""}`].join(" "), ref: componentRef }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "katechat-message-linked-toggle" }, /* @__PURE__ */ import_react3.default.createElement(
     import_core3.Switch,
     {
       checked: showMainMessage,
@@ -57589,7 +57573,7 @@ var ChatMessage = (props) => {
       label: showMainMessage ? "Main" : "Others",
       size: "sm"
     }
-  )), /* @__PURE__ */ import_react3.default.createElement("div", { className: [ChatMessage_module_default.main, showMainMessage ? "" : ChatMessage_module_default.hidden].join(" ") }, mainMessage), /* @__PURE__ */ import_react3.default.createElement("div", { className: [ChatMessage_module_default.linked, showMainMessage ? ChatMessage_module_default.hidden : ""].join(" ") }, linkedMessagesCmp));
+  )), /* @__PURE__ */ import_react3.default.createElement("div", { className: ["katechat-message-main", showMainMessage ? "" : "hidden"].join(" ") }, mainMessage), /* @__PURE__ */ import_react3.default.createElement("div", { className: ["katechat-message-linked", showMainMessage ? "hidden" : ""].join(" ") }, linkedMessagesCmp));
 };
 ChatMessage.displayName = "ChatMessage";
 
@@ -57597,7 +57581,15 @@ ChatMessage.displayName = "ChatMessage";
 var import_react4 = __toESM(require("react"), 1);
 var import_core5 = require("@mantine/core");
 var ChatMessagePreview = ({ html: html2, text: text2 }) => {
-  return /* @__PURE__ */ import_react4.default.createElement(import_core5.ScrollArea, { type: "hover", offsetScrollbars: true, className: [ChatMessage_module_default.message, ChatMessage_module_default.preview].join(" ") }, text2 ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, html2 ? html2.map((part, index) => /* @__PURE__ */ import_react4.default.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ import_react4.default.createElement("div", null, text2)) : "...");
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_core5.ScrollArea,
+    {
+      type: "hover",
+      offsetScrollbars: true,
+      className: ["katechat-message-content", "katechat-message-preview"].join(" ")
+    },
+    text2 ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, html2 ? html2.map((part, index) => /* @__PURE__ */ import_react4.default.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ import_react4.default.createElement("div", null, text2)) : "..."
+  );
 };
 
 // src/components/chat/message/LinkedChatMessage.tsx
@@ -57644,7 +57636,7 @@ var LinkedChatMessage = ({ message, parentIndex, index, plugins, models }) => {
   const model = (0, import_react6.useMemo)(() => {
     return models?.find((m) => m.modelId === message.modelId);
   }, [models, message.modelId]);
-  return /* @__PURE__ */ import_react6.default.createElement(import_carousel2.Carousel.Slide, { key: message.id, className: ChatMessage_module_default.linkedMessageContainer }, /* @__PURE__ */ import_react6.default.createElement(import_core6.Group, { align: "center" }, /* @__PURE__ */ import_react6.default.createElement(import_core6.Avatar, { radius: "xl", size: "md" }, model ? /* @__PURE__ */ import_react6.default.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ import_react6.default.createElement(import_icons_react4.IconRobot, null)), /* @__PURE__ */ import_react6.default.createElement(import_core6.Group, { gap: "xs" }, /* @__PURE__ */ import_react6.default.createElement(import_core6.Text, { size: "sm", fw: 500, c: "teal" }, message.modelName), message.status && /* @__PURE__ */ import_react6.default.createElement(MessageStatus, { status: message.status }), message.statusInfo && /* @__PURE__ */ import_react6.default.createElement(import_core6.Text, { size: "xs", c: "dimmed" }, message.statusInfo))), /* @__PURE__ */ import_react6.default.createElement("div", { className: ChatMessage_module_default.message }, message.html ? message.html.map((part, index2) => /* @__PURE__ */ import_react6.default.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ import_react6.default.createElement("div", null, message.content), /* @__PURE__ */ import_react6.default.createElement("div", { className: ChatMessage_module_default.messageFooter }, /* @__PURE__ */ import_react6.default.createElement(CopyMessageButton, { messageId: message.id, messageIndex: parentIndex, linkedMessageIndex: index }), plugins)));
+  return /* @__PURE__ */ import_react6.default.createElement(import_carousel2.Carousel.Slide, { key: message.id, className: "katechat-message-linked" }, /* @__PURE__ */ import_react6.default.createElement(import_core6.Group, { align: "center" }, /* @__PURE__ */ import_react6.default.createElement(import_core6.Avatar, { radius: "xl", size: "md" }, model ? /* @__PURE__ */ import_react6.default.createElement(ProviderIcon, { apiProvider: model.apiProvider, provider: model.provider }) : /* @__PURE__ */ import_react6.default.createElement(import_icons_react4.IconRobot, null)), /* @__PURE__ */ import_react6.default.createElement(import_core6.Group, { gap: "xs" }, /* @__PURE__ */ import_react6.default.createElement(import_core6.Text, { size: "sm", fw: 500, c: "teal" }, message.modelName), message.status && /* @__PURE__ */ import_react6.default.createElement(MessageStatus, { status: message.status }), message.statusInfo && /* @__PURE__ */ import_react6.default.createElement(import_core6.Text, { size: "xs", c: "dimmed" }, message.statusInfo))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "katechat-message-content" }, message.html ? message.html.map((part, index2) => /* @__PURE__ */ import_react6.default.createElement("div", { key: index2, dangerouslySetInnerHTML: { __html: part } })) : /* @__PURE__ */ import_react6.default.createElement("div", null, message.content), /* @__PURE__ */ import_react6.default.createElement("div", { className: "katechat-message-footer" }, /* @__PURE__ */ import_react6.default.createElement(CopyMessageButton, { messageId: message.id, messageIndex: parentIndex, linkedMessageIndex: index }), plugins)));
 };
 LinkedChatMessage.displayName = "LinkedChatMessage";
 
@@ -58234,18 +58226,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 = import_react13.default.forwardRef(
   ({
@@ -58318,12 +58298,12 @@ var ChatMessagesContainer = import_react13.default.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__ */ import_react13.default.createElement("div", { className: ChatMessagesContainer_module_default.scroller, ref: messagesContainerRef, onScroll: handleScroll }, /* @__PURE__ */ import_react13.default.createElement("div", { ref: firstMessageRef }), loading && /* @__PURE__ */ import_react13.default.createElement(import_core11.Group, { justify: "center", align: "center", py: "xl" }, /* @__PURE__ */ import_react13.default.createElement(import_core11.Loader, null)), /* @__PURE__ */ import_react13.default.createElement("div", { className: ChatMessagesContainer_module_default.messagesList }, messages && /* @__PURE__ */ import_react13.default.createElement(
+      /* @__PURE__ */ import_react13.default.createElement("div", { className: "katechat-messages-container-scroller", ref: messagesContainerRef, onScroll: handleScroll }, /* @__PURE__ */ import_react13.default.createElement("div", { ref: firstMessageRef }), loading && /* @__PURE__ */ import_react13.default.createElement(import_core11.Group, { justify: "center", align: "center", py: "xl" }, /* @__PURE__ */ import_react13.default.createElement(import_core11.Loader, null)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "katechat-messages-list" }, messages && /* @__PURE__ */ import_react13.default.createElement(
         ChatMessagesList,
         {
           messages,
@@ -58334,7 +58314,7 @@ var ChatMessagesContainer = import_react13.default.forwardRef(
           detailsPlugins
         }
       ))),
-      /* @__PURE__ */ import_react13.default.createElement("div", { className: [ChatMessagesContainer_module_default.anchorContainer, showAnchorButton ? ChatMessagesContainer_module_default.visible : ""].join(" ") }, /* @__PURE__ */ import_react13.default.createElement("div", { className: ChatMessagesContainer_module_default.anchor }, /* @__PURE__ */ import_react13.default.createElement(import_icons_react8.IconCircleChevronDown, { size: 32, color: "teal", style: { cursor: "pointer" }, onClick: anchorHandleClick })))
+      /* @__PURE__ */ import_react13.default.createElement("div", { className: ["katechat-anchor-container", showAnchorButton ? "container--visible" : ""].join(" ") }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "katechat-anchor" }, /* @__PURE__ */ import_react13.default.createElement(import_icons_react8.IconCircleChevronDown, { size: 32, color: "teal", onClick: anchorHandleClick })))
     );
   }
 );