impact-ui 5.0.1-chart.1 → 5.0.2-alpha.1

package/dist/components/TableChat/components/TableChatRightSection/ChatHeader/ChatHeaderInfo.js

@@ -1,17 +1,183 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import default_1$1 from "../../../../../node_modules/@mui/icons-material/Check.js";
+import default_1$2 from "../../../../../node_modules/@mui/icons-material/CheckCircle.js";
+import default_1 from "../../../../../node_modules/@mui/icons-material/Close.js";
 import { useTextOverflow } from "../../../../../utils/useTextOverflow.js";
+import { Input } from "../../../../Input/index.js";
 import { Tooltip } from "../../../../Tooltip/index.js";
 import { useTranslation } from "../../../../../i18n/useTranslation.js";
-const ChatHeaderInfo = ({ title, createdBy, createdAt, chatId, showChatId = false }) => {
+const ChatHeaderInfo = ({
+  title,
+  createdBy,
+  createdAt,
+  chatId,
+  showChatId = false,
+  showResolve = false,
+  isResolved = false,
+  onResolve,
+  resolveLabel,
+  displayId,
+  isTitleEditable,
+  onTitleChange
+}) => {
   const { t } = useTranslation();
-  const fullText = `${chatId && showChatId ? t("tableChat.header.idSegment", { id: chatId.slice(0, 6) }) : ""}${createdBy ? t("tableChat.header.createdBySegment", { createdBy }) : ""}${createdAt ? t("tableChat.header.atSegment", { createdAt }) : ""}`;
+  const idForMeta = displayId ?? chatId;
+  const isCommittingRef = useRef(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftTitle, setDraftTitle] = useState(title ?? "");
+  const [isSaving, setIsSaving] = useState(false);
+  const fullText = `${idForMeta && showChatId ? t("tableChat.header.idSegment", { id: idForMeta }) : ""}${createdBy ? t("tableChat.header.createdBySegment", { createdBy }) : ""}${createdAt ? t("tableChat.header.atSegment", { createdAt }) : ""}`;
   const { textRef: fullTextRef, isOverflowing: isFullTextOverflowing } = useTextOverflow([
     fullText,
     title
   ]);
+  const shouldShowResolve = Boolean(showResolve || onResolve);
+  const canEditTitle = Boolean(isTitleEditable ?? onTitleChange);
+  const canConfirm = Boolean(draftTitle.trim()) && !isSaving;
+  useEffect(() => {
+    if (!isEditing) {
+      setDraftTitle(title ?? "");
+    }
+  }, [title, isEditing]);
+  const handleResolveClick = (e) => {
+    e.stopPropagation();
+    onResolve == null ? void 0 : onResolve(chatId);
+  };
+  const exitEditing = () => {
+    setDraftTitle(title ?? "");
+    setIsEditing(false);
+  };
+  const commitTitle = async () => {
+    if (isCommittingRef.current) return;
+    const nextTitle = draftTitle.trim();
+    if (!nextTitle || nextTitle === (title ?? "").trim()) {
+      exitEditing();
+      return;
+    }
+    if (!onTitleChange || isSaving) {
+      exitEditing();
+      return;
+    }
+    isCommittingRef.current = true;
+    setIsSaving(true);
+    try {
+      await onTitleChange(chatId, nextTitle);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("[ChatHeaderInfo] Title update failed:", error);
+      setDraftTitle(title ?? "");
+    } finally {
+      setIsSaving(false);
+      isCommittingRef.current = false;
+    }
+  };
+  const handleTitleClick = () => {
+    if (!canEditTitle || isEditing || isSaving) return;
+    setDraftTitle(title ?? "");
+    setIsEditing(true);
+  };
+  const handleTitleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (canConfirm) {
+        commitTitle();
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      exitEditing();
+    }
+  };
+  const handleConfirmClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!canConfirm) return;
+    commitTitle();
+  };
+  const handleCancelClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isSaving) return;
+    exitEditing();
+  };
   return /* @__PURE__ */ jsxs("div", { className: "chat-header-content", children: [
-    /* @__PURE__ */ jsx("h1", { className: "chat-title chat-text-ellipsis", title, children: title }),
-    fullText ? /* @__PURE__ */ jsx("div", { className: "chat-info-outer", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: "chat-title-row", children: [
+      isEditing ? /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          "aria-label": t("tableChat.header.editTitle"),
+          className: "chat-title-input",
+          disabled: isSaving,
+          rightIcon: /* @__PURE__ */ jsxs("div", { className: "chat-title-input__actions", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": t("common.cancel"),
+                className: "chat-title-input__btn chat-title-input__btn--cancel",
+                disabled: isSaving,
+                type: "button",
+                onClick: handleCancelClick,
+                onMouseDown: (e) => e.preventDefault(),
+                children: /* @__PURE__ */ jsx(default_1, { fontSize: "inherit" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": t("common.save"),
+                className: "chat-title-input__btn chat-title-input__btn--confirm",
+                disabled: !canConfirm,
+                type: "button",
+                onClick: handleConfirmClick,
+                onMouseDown: (e) => e.preventDefault(),
+                children: /* @__PURE__ */ jsx(default_1$1, { fontSize: "inherit" })
+              }
+            )
+          ] }),
+          size: "small",
+          type: "text",
+          value: draftTitle,
+          width: "100%",
+          onChange: (e) => setDraftTitle(e.target.value),
+          onFocus: (e) => e.target.select(),
+          onKeyDown: handleTitleKeyDown
+        }
+      ) : /* @__PURE__ */ jsx(
+        "h1",
+        {
+          "aria-label": canEditTitle ? t("tableChat.header.editTitle") : void 0,
+          className: `chat-title chat-text-ellipsis${canEditTitle ? " chat-title--editable" : ""}`,
+          role: canEditTitle ? "button" : void 0,
+          tabIndex: canEditTitle ? 0 : void 0,
+          title,
+          onClick: handleTitleClick,
+          onKeyDown: (e) => {
+            if (!canEditTitle) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTitleClick();
+            }
+          },
+          children: title
+        }
+      ),
+      shouldShowResolve && !isEditing ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `chat-resolve${isResolved ? " chat-resolve--resolved" : ""}`,
+          disabled: isResolved,
+          "aria-disabled": isResolved,
+          onClick: isResolved ? void 0 : handleResolveClick,
+          children: [
+            /* @__PURE__ */ jsx(default_1$2, { className: "chat-resolve__icon", fontSize: "inherit" }),
+            /* @__PURE__ */ jsx("span", { className: "chat-resolve__label", children: resolveLabel ?? (isResolved ? t("tableChat.header.resolved") : t("tableChat.header.resolve")) })
+          ]
+        }
+      ) : null
+    ] }),
+    fullText && !isEditing ? /* @__PURE__ */ jsx("div", { className: "chat-info-outer", children: /* @__PURE__ */ jsx(
       Tooltip,
       {
         isHoverEnabled: isFullTextOverflowing,

package/dist/components/TableChat/components/TableChatRightSection/ChatInlineEdit/ChatInlineEdit.d.ts

@@ -0,0 +1,12 @@
+
+export declare const ChatInlineEdit: ({ content, timestamp, pinned, isPinChatIconvisible, onPin, onCancel, onUpdate, }: {
+    content: any;
+    timestamp: any;
+    pinned?: boolean | undefined;
+    isPinChatIconvisible?: boolean | undefined;
+    onPin: any;
+    onCancel: any;
+    onUpdate: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChatInlineEdit;
+//# sourceMappingURL=ChatInlineEdit.d.ts.map

package/dist/components/TableChat/components/TableChatRightSection/ChatInlineEdit/ChatInlineEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInlineEdit.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatInlineEdit/ChatInlineEdit.tsx"],"names":[],"mappings":"AAKA,OAAO,8BAA8B,CAAC;AA0BtC,eAAO,MAAM,cAAc,GAAI;;;;;;;;CAQ9B,4CAkHA,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/TableChat/components/TableChatRightSection/ChatInlineEdit/ChatInlineEdit.js

@@ -0,0 +1,132 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}:root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px;--ia-modal-backdrop:#0d152ccc}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.chat-inline-edit{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;max-width:529px;width:100%}.chat-inline-edit__meta{align-items:center;display:flex;gap:8px;justify-content:flex-end;min-height:24px;width:100%}.chat-inline-edit__pin{align-items:center;background:#0000;border:none;cursor:pointer;display:inline-flex;height:16px;justify-content:center;padding:0;width:16px}.chat-inline-edit__pin img{display:block;height:16px;width:16px}.chat-inline-edit__timestamp{color:#60697d;font-size:12px;font-weight:500;letter-spacing:.12px;line-height:1.6;white-space:nowrap}.chat-inline-edit__field{background:#fff;border:1px solid #4259ee;border-radius:8px;box-sizing:border-box;min-height:66px;padding:5px;width:100%}.chat-inline-edit__textarea{background:#0000;border:none;box-sizing:border-box;color:#1f2b4d;display:block;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;letter-spacing:.14px;line-height:1.6;margin:0;max-height:200px;min-height:54px;outline:none;overflow-y:auto;padding:0;resize:none;width:100%}.chat-inline-edit__actions{align-items:flex-start;display:flex;gap:12px;justify-content:flex-end}.chat-inline-edit__actions .ia-styles.ia-btn{max-height:28px;min-height:28px;padding:4px 12px}.chat-message.user-message>.message-content .chat-inline-edit{margin-left:auto}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { getAssetUrl } from "../../../../../utils/assetBase.js";
+import { Button } from "../../../../Button/index.js";
+
+import { useTranslation } from "../../../../../i18n/useTranslation.js";
+const PinnedIcon = getAssetUrl("icons/pinedIcon.svg");
+const UnpinIcon = getAssetUrl("icons/unpinedIcon.svg");
+const stripHtml = (raw) => {
+  if (typeof raw !== "string") return "";
+  return raw.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<[^>]*>/g, "").replace(/\n{3,}/g, "\n\n").trim();
+};
+const toHtmlContent = (plain) => {
+  const escaped = plain.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return escaped.split(/\n/).map((line) => `<p>${line || "<br>"}</p>`).join("");
+};
+const ChatInlineEdit = ({
+  content,
+  timestamp,
+  pinned = false,
+  isPinChatIconvisible = false,
+  onPin,
+  onCancel,
+  onUpdate
+}) => {
+  const { t } = useTranslation();
+  const textareaRef = useRef(null);
+  const [value, setValue] = useState(() => stripHtml(content));
+  const [saving, setSaving] = useState(false);
+  const [showPinned, setShowPinned] = useState(pinned);
+  useEffect(() => {
+    setValue(stripHtml(content));
+  }, [content]);
+  useEffect(() => {
+    setShowPinned(pinned);
+  }, [pinned]);
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.focus();
+    el.setSelectionRange(el.value.length, el.value.length);
+    el.style.height = "auto";
+    el.style.height = `${Math.max(66, el.scrollHeight)}px`;
+  }, []);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = `${Math.max(66, el.scrollHeight)}px`;
+  };
+  const handlePin = async () => {
+    if (!onPin) return;
+    try {
+      const response = await onPin(!showPinned);
+      if (response != null) {
+        setShowPinned(Boolean((response == null ? void 0 : response.isPinned) ?? !showPinned));
+      } else {
+        setShowPinned(!showPinned);
+      }
+    } catch (error) {
+      console.error("[ChatInlineEdit] Pin failed:", error);
+    }
+  };
+  const handleUpdate = async () => {
+    const trimmed = value.trim();
+    if (!trimmed || saving) return;
+    setSaving(true);
+    try {
+      await (onUpdate == null ? void 0 : onUpdate(toHtmlContent(trimmed)));
+    } catch (error) {
+      console.error("[ChatInlineEdit] Update failed:", error);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel == null ? void 0 : onCancel();
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleUpdate();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "chat-inline-edit", children: [
+    /* @__PURE__ */ jsxs("div", { className: "chat-inline-edit__meta", children: [
+      isPinChatIconvisible ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": showPinned ? t("tableChat.channelItem.unpinChat") : t("tableChat.channelItem.pinChat"),
+          className: "chat-inline-edit__pin",
+          type: "button",
+          onClick: handlePin,
+          children: /* @__PURE__ */ jsx("img", { alt: "", src: showPinned ? PinnedIcon : UnpinIcon })
+        }
+      ) : null,
+      timestamp ? /* @__PURE__ */ jsx("span", { className: "chat-inline-edit__timestamp", children: timestamp }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "chat-inline-edit__field", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        "aria-label": t("tableChat.input.editingMessage"),
+        className: "chat-inline-edit__textarea",
+        rows: 2,
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "chat-inline-edit__actions", children: [
+      /* @__PURE__ */ jsx(Button, { size: "small", type: "default", variant: "secondary", onClick: onCancel, children: t("common.cancel") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: !value.trim() || saving,
+          loading: saving,
+          size: "small",
+          type: "default",
+          variant: "primary",
+          onClick: handleUpdate,
+          children: t("tableChat.message.update")
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ChatInlineEdit
+};

package/dist/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.d.ts

@@ -1,5 +1,5 @@
 
-export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttach, onImageUpload, onEmojiClick, showFormatting, showQuickAction, quickActionLabel, disabled, maxLength, className, messageConfig, isEditMode, editingMessage, onCancelEdit, chatId, }: {
+export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttach, onImageUpload, onEmojiClick, onQuickAction, showFormatting, showQuickAction, quickActionLabel, disabled, maxLength, className, messageConfig, isEditMode, editingMessage, onCancelEdit, isReplyMode, replyingToMessage, onCancelReply, chatId, }: {
     placeholder: any;
     value: any;
     onChange: any;
@@ -7,6 +7,7 @@ export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttac
     onAttach: any;
     onImageUpload: any;
     onEmojiClick: any;
+    onQuickAction: any;
     showFormatting?: boolean | undefined;
     showQuickAction?: boolean | undefined;
     quickActionLabel: any;
@@ -17,6 +18,9 @@ export declare const ChatInput: ({ placeholder, value, onChange, onSend, onAttac
     isEditMode?: boolean | undefined;
     editingMessage?: null | undefined;
     onCancelEdit: any;
+    isReplyMode?: boolean | undefined;
+    replyingToMessage?: null | undefined;
+    onCancelReply: any;
     chatId: any;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatInput.d.ts.map

package/dist/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.tsx"],"names":[],"mappings":"AAWA,OAAO,yBAAyB,CAAC;AAcjC,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;;;;;;;;;CAmBzB,4CAmuBA,CAAC"}
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatInput/ChatInput.tsx"],"names":[],"mappings":"AAYA,OAAO,yBAAyB,CAAC;AAcjC,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;;;;;;;;;;;;;CAuBzB,4CA6tBA,CAAC"}