@zenify-omni/chat-ui-react-js 0.1.0

package/components/chat-route/chat-box/zalo-rtf-utils.js

@@ -0,0 +1,422 @@
+const ZALO_COLORS = [
+  { st: "c_db342e", hex: "#db342e" },
+  // Red
+  { st: "c_f27806", hex: "#f27806" },
+  // Orange
+  { st: "c_f7b503", hex: "#f7b503" },
+  // Yellow
+  { st: "c_15a85f", hex: "#15a85f" }
+  // Green
+];
+const STYLE_MAP = { italic: "i", bold: "b", underline: "u", strike: "s" };
+const ST_TO_MARK = { i: "italic", b: "bold", u: "underline", s: "strike" };
+const LIST_ST = /* @__PURE__ */ new Set(["lst_1", "lst_2"]);
+const isColorSt = (st) => st?.startsWith("c_");
+function collectLines(doc) {
+  const lines = [];
+  function processBlock(node, listSt = null) {
+    if (node.type.name === "bulletList") {
+      node.forEach((child) => processBlock(child, "lst_1"));
+    } else if (node.type.name === "orderedList") {
+      node.forEach((child) => processBlock(child, "lst_2"));
+    } else if (node.type.name === "listItem") {
+      node.forEach((child) => processBlock(child, listSt));
+    } else if (node.type.name === "paragraph") {
+      let inlineStyles = [];
+      let lineText = "";
+      node.forEach((child) => {
+        if (child.type.name === "hardBreak") {
+          lines.push({ text: lineText, inlineStyles, listSt });
+          lineText = "";
+          inlineStyles = [];
+          return;
+        }
+        if (!child.isText) return;
+        const relStart = lineText.length;
+        const len = child.text.length;
+        child.marks.forEach((mark) => {
+          if (mark.type.name === "zaloColor" && mark.attrs.color) {
+            inlineStyles.push({ relStart, len, st: mark.attrs.color });
+          } else {
+            const st = STYLE_MAP[mark.type.name];
+            if (st) inlineStyles.push({ relStart, len, st });
+          }
+        });
+        lineText += child.text;
+      });
+      lines.push({ text: lineText, inlineStyles, listSt });
+    }
+  }
+  doc.forEach((node) => processBlock(node));
+  return lines;
+}
+function collectLinesWithMentions(doc) {
+  const lines = [];
+  function processBlock(node, listSt = null) {
+    if (node.type.name === "bulletList") {
+      node.forEach((child) => processBlock(child, "lst_1"));
+    } else if (node.type.name === "orderedList") {
+      node.forEach((child) => processBlock(child, "lst_2"));
+    } else if (node.type.name === "listItem") {
+      node.forEach((child) => processBlock(child, listSt));
+    } else if (node.type.name === "paragraph") {
+      let inlineStyles = [];
+      let lineText = "";
+      let lineTextOriginal = "";
+      node.forEach((child) => {
+        if (child.type.name === "hardBreak") {
+          lines.push({
+            text: lineText,
+            textOriginal: lineTextOriginal,
+            inlineStyles,
+            listSt
+          });
+          lineText = "";
+          lineTextOriginal = "";
+          inlineStyles = [];
+          return;
+        }
+        if (child.type.name === "mention") {
+          const rawId = child.attrs.id ?? "";
+          const cleanId = rawId.startsWith("@") ? rawId.slice(1) : rawId;
+          lineText += `@${cleanId}`;
+          lineTextOriginal += `@${child.attrs.label ?? ""}`;
+        } else if (child.isText) {
+          const relStart = lineText.length;
+          const len = child.text.length;
+          child.marks.forEach((mark) => {
+            if (mark.type.name === "zaloColor" && mark.attrs.color) {
+              inlineStyles.push({ relStart, len, st: mark.attrs.color });
+            } else {
+              const st = STYLE_MAP[mark.type.name];
+              if (st) inlineStyles.push({ relStart, len, st });
+            }
+          });
+          lineText += child.text;
+          lineTextOriginal += child.text;
+        }
+      });
+      lines.push({
+        text: lineText,
+        textOriginal: lineTextOriginal,
+        inlineStyles,
+        listSt
+      });
+    }
+  }
+  doc.forEach((node) => processBlock(node));
+  return lines;
+}
+function serializeTiptapToRtf(state) {
+  const lines = collectLines(state.doc);
+  const styles = [];
+  let plainText = "";
+  for (let i = 0; i < lines.length; i++) {
+    const { text, inlineStyles, listSt } = lines[i];
+    if (i > 0) plainText += "\n";
+    const lineStart = plainText.length;
+    for (const { relStart, len, st } of inlineStyles) {
+      styles.push({ start: lineStart + relStart, len, st });
+    }
+    if (listSt && text.length > 0) {
+      styles.push({ start: lineStart, len: text.length, st: listSt });
+    }
+    plainText += text;
+  }
+  return { text: plainText, styles };
+}
+function serializeTiptapForGroup(state) {
+  const lines = collectLinesWithMentions(state.doc);
+  const styles = [];
+  const mentions = [];
+  const mentionsDisplay = [];
+  let plainText = "";
+  let originalText = "";
+  for (let i = 0; i < lines.length; i++) {
+    const { text, textOriginal, inlineStyles, listSt } = lines[i];
+    if (i > 0) {
+      plainText += "\n";
+      originalText += "\n";
+    }
+    const lineStart = plainText.length;
+    for (const { relStart, len, st } of inlineStyles) {
+      styles.push({ start: lineStart + relStart, len, st });
+    }
+    if (listSt && text.length > 0) {
+      styles.push({ start: lineStart, len: text.length, st: listSt });
+    }
+    plainText += text;
+    originalText += textOriginal;
+  }
+  state.doc.descendants((node) => {
+    if (node.type.name === "mention") {
+      const rawId = node.attrs.id ?? "";
+      const cleanId = rawId.startsWith("@") ? rawId.slice(1) : rawId;
+      mentions.push(`@${cleanId}`);
+      mentionsDisplay.push(`@${node.attrs.label ?? ""}`);
+    }
+    return true;
+  });
+  return {
+    text: plainText,
+    textOriginal: originalText,
+    styles,
+    mentions,
+    mentionsDisplay
+  };
+}
+function marksEqual(a, b) {
+  if (a.length !== b.length) return false;
+  return a.every(
+    (ma) => b.some(
+      (mb) => mb.type === ma.type && JSON.stringify(mb.attrs ?? null) === JSON.stringify(ma.attrs ?? null)
+    )
+  );
+}
+function buildParaNode(paraInfo, marksByChar) {
+  const { text: paraText, charOffset } = paraInfo;
+  const paraContent = [];
+  let segStart = 0;
+  while (segStart < paraText.length) {
+    const currentMarks = marksByChar[charOffset + segStart];
+    let segEnd = segStart + 1;
+    while (segEnd < paraText.length) {
+      const nextMarks = marksByChar[charOffset + segEnd];
+      if (marksEqual(currentMarks, nextMarks)) segEnd++;
+      else break;
+    }
+    const node = { type: "text", text: paraText.slice(segStart, segEnd) };
+    if (currentMarks.length > 0) {
+      node.marks = currentMarks.map(
+        (m) => m.attrs ? { type: m.type, attrs: m.attrs } : { type: m.type }
+      );
+    }
+    paraContent.push(node);
+    segStart = segEnd;
+  }
+  return {
+    type: "paragraph",
+    ...paraContent.length > 0 ? { content: paraContent } : {}
+  };
+}
+function parseRtfToTiptap(text, styles = []) {
+  if (!text) return { type: "doc", content: [{ type: "paragraph" }] };
+  const marksByChar = Array.from({ length: text.length }, () => []);
+  const listByChar = new Array(text.length).fill(null);
+  for (const { start, len, st } of styles) {
+    if (LIST_ST.has(st)) {
+      for (let i2 = start; i2 < start + len && i2 < text.length; i2++) {
+        listByChar[i2] = st;
+      }
+    } else {
+      let markObj;
+      if (isColorSt(st)) {
+        markObj = { type: "zaloColor", attrs: { color: st } };
+      } else {
+        const markType = ST_TO_MARK[st];
+        if (!markType) continue;
+        markObj = { type: markType };
+      }
+      for (let i2 = start; i2 < start + len && i2 < text.length; i2++) {
+        const already = marksByChar[i2].some(
+          (m) => m.type === markObj.type && JSON.stringify(m.attrs ?? null) === JSON.stringify(markObj.attrs ?? null)
+        );
+        if (!already) marksByChar[i2].push(markObj);
+      }
+    }
+  }
+  const paraTexts = text.split("\n");
+  const paraInfos = [];
+  let charOffset = 0;
+  for (const paraText of paraTexts) {
+    let listSt = null;
+    for (let i2 = 0; i2 < paraText.length; i2++) {
+      const ls = listByChar[charOffset + i2];
+      if (ls) {
+        listSt = ls;
+        break;
+      }
+    }
+    paraInfos.push({ text: paraText, charOffset, listSt });
+    charOffset += paraText.length + 1;
+  }
+  const docContent = [];
+  let i = 0;
+  while (i < paraInfos.length) {
+    const para = paraInfos[i];
+    if (para.listSt) {
+      const listType = para.listSt === "lst_1" ? "bulletList" : "orderedList";
+      const listItems = [];
+      while (i < paraInfos.length && paraInfos[i].listSt === para.listSt) {
+        listItems.push({
+          type: "listItem",
+          content: [buildParaNode(paraInfos[i], marksByChar)]
+        });
+        i++;
+      }
+      docContent.push({ type: listType, content: listItems });
+    } else {
+      docContent.push(buildParaNode(para, marksByChar));
+      i++;
+    }
+  }
+  return {
+    type: "doc",
+    content: docContent.length > 0 ? docContent : [{ type: "paragraph" }]
+  };
+}
+function escapeHtml(s) {
+  return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function normalizeZaloStyleRanges(styles = []) {
+  const out = [];
+  if (!Array.isArray(styles)) return out;
+  for (const row of styles) {
+    if (row == null || typeof row !== "object") continue;
+    const { start, len, st } = row;
+    if (typeof start !== "number" || typeof len !== "number" || st == null)
+      continue;
+    const parts = String(st).split(",").map((p) => p.trim()).filter(Boolean);
+    for (const p of parts) {
+      out.push({ start, len, st: p });
+    }
+  }
+  return out;
+}
+function tryParseStylesFromMeta(content) {
+  try {
+    const params = content?.meta?.content?.params;
+    if (!params || typeof params !== "string") return null;
+    const parsed = JSON.parse(params);
+    if (!Array.isArray(parsed?.styles)) return null;
+    return parsed.styles;
+  } catch {
+    return null;
+  }
+}
+function getZaloMessageStyles(msg) {
+  const extra = msg?.extra_data?.styles;
+  if (Array.isArray(extra) && extra.length > 0) {
+    return normalizeZaloStyleRanges(extra);
+  }
+  const metaStyles = tryParseStylesFromMeta(msg?.content);
+  if (metaStyles?.length) return normalizeZaloStyleRanges(metaStyles);
+  return [];
+}
+function wrapTextWithMarks(escapedText, marks) {
+  if (!escapedText) return "";
+  let out = escapedText;
+  const order = ["strike", "underline", "italic", "bold"];
+  for (const t of order) {
+    if (!marks.some((m) => m.type === t)) continue;
+    if (t === "strike") out = `<s>${out}</s>`;
+    else if (t === "underline") out = `<u>${out}</u>`;
+    else if (t === "italic") out = `<em>${out}</em>`;
+    else if (t === "bold") out = `<strong>${out}</strong>`;
+  }
+  const colorM = marks.find((m) => m.type === "zaloColor" && m.attrs?.color);
+  if (colorM) {
+    const hex = ZALO_COLORS.find((c) => c.st === colorM.attrs.color)?.hex;
+    if (hex) out = `<span style="color:${hex}">${out}</span>`;
+  }
+  return out;
+}
+function buildParaDisplayHtml(paraInfo, marksByChar) {
+  const { text: paraText, charOffset } = paraInfo;
+  if (!paraText.length) return "";
+  let html = "";
+  let segStart = 0;
+  while (segStart < paraText.length) {
+    const currentMarks = marksByChar[charOffset + segStart] || [];
+    let segEnd = segStart + 1;
+    while (segEnd < paraText.length) {
+      const nextMarks = marksByChar[charOffset + segEnd] || [];
+      if (marksEqual(currentMarks, nextMarks)) segEnd++;
+      else break;
+    }
+    const slice = paraText.slice(segStart, segEnd);
+    html += wrapTextWithMarks(escapeHtml(slice), currentMarks);
+    segStart = segEnd;
+  }
+  return html;
+}
+function zaloRtfToDisplayHtml(text, styles = []) {
+  if (!text) return "";
+  const normalized = normalizeZaloStyleRanges(styles);
+  if (normalized.length === 0) {
+    return escapeHtml(text).replace(/\n/g, "<br/>");
+  }
+  const marksByChar = Array.from({ length: text.length }, () => []);
+  const listByChar = new Array(text.length).fill(null);
+  for (const { start, len, st } of normalized) {
+    if (LIST_ST.has(st)) {
+      for (let i2 = start; i2 < start + len && i2 < text.length; i2++) {
+        listByChar[i2] = st;
+      }
+    } else {
+      let markObj;
+      if (isColorSt(st)) {
+        markObj = { type: "zaloColor", attrs: { color: st } };
+      } else {
+        const markType = ST_TO_MARK[st];
+        if (!markType) continue;
+        markObj = { type: markType };
+      }
+      for (let i2 = start; i2 < start + len && i2 < text.length; i2++) {
+        const already = marksByChar[i2].some(
+          (m) => m.type === markObj.type && JSON.stringify(m.attrs ?? null) === JSON.stringify(markObj.attrs ?? null)
+        );
+        if (!already) marksByChar[i2].push(markObj);
+      }
+    }
+  }
+  const paraTexts = text.split("\n");
+  const paraInfos = [];
+  let charOffset = 0;
+  for (const paraText of paraTexts) {
+    let listSt = null;
+    for (let i2 = 0; i2 < paraText.length; i2++) {
+      const ls = listByChar[charOffset + i2];
+      if (ls) {
+        listSt = ls;
+        break;
+      }
+    }
+    paraInfos.push({ text: paraText, charOffset, listSt });
+    charOffset += paraText.length + 1;
+  }
+  const parts = [];
+  let i = 0;
+  while (i < paraInfos.length) {
+    const para = paraInfos[i];
+    if (para.listSt) {
+      const listTag = para.listSt === "lst_1" ? "ul" : "ol";
+      const listClass = para.listSt === "lst_1" ? "list-disc pl-5 my-1" : "list-decimal pl-5 my-1";
+      const items = [];
+      while (i < paraInfos.length && paraInfos[i].listSt === para.listSt) {
+        const inner = buildParaDisplayHtml(paraInfos[i], marksByChar);
+        items.push(`<li class="mb-0.5">${inner || "<br/>"}</li>`);
+        i++;
+      }
+      parts.push(
+        `<${listTag} class="${listClass}">${items.join("")}</${listTag}>`
+      );
+    } else {
+      const inner = buildParaDisplayHtml(para, marksByChar);
+      parts.push(
+        inner ? `<p class="my-0 min-h-[1em]">${inner}</p>` : '<p class="my-0 min-h-[1em]"><br/></p>'
+      );
+      i++;
+    }
+  }
+  return parts.join("");
+}
+export {
+  ZALO_COLORS,
+  getZaloMessageStyles,
+  normalizeZaloStyleRanges,
+  parseRtfToTiptap,
+  serializeTiptapForGroup,
+  serializeTiptapToRtf,
+  zaloRtfToDisplayHtml
+};

package/components/chat-route/chat-list/action-chat-item.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  EllipsisVertical,
+  Bookmark,
+  MailQuestion,
+  Pin,
+  PinOff
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent
+} from "../../ui/dropdown-menu.js";
+import ChatTagSelector from "../chat-box/right-side/chat-tag-selector.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const ActionChatItem = ({
+  data,
+  onPin,
+  isPinned,
+  isChecked,
+  onMarkUnread,
+  showMarkUnread
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "flex translate-x-4 items-center justify-end", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      isPinned && /* @__PURE__ */ jsx(Pin, { size: 12, className: "ml-[6px] rotate-45" }),
+      /* @__PURE__ */ jsx(
+        EllipsisVertical,
+        {
+          className: cn("cursor-pointer", isChecked && "text-primary"),
+          size: 18
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        className: "w-38",
+        align: "start",
+        sideOffset: -28,
+        alignOffset: 20,
+        children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+            /* @__PURE__ */ jsxs(
+              DropdownMenuSubTrigger,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                className: "cursor-pointer",
+                children: [
+                  /* @__PURE__ */ jsx(Bookmark, { size: 16, className: "mr-0.5" }),
+                  t("chat:action.assignLabel", { defaultValue: "G\xE1n nh\xE3n" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuSubContent, { className: "w-[220px]", children: /* @__PURE__ */ jsx(
+              ChatTagSelector,
+              {
+                chatRoomId: data._id,
+                selected: data.tags || [],
+                personalSelected: data.personal_tags || [],
+                placeholder: t("common:placeholder.enterTags", {
+                  defaultValue: "Nh\u1EADp tags"
+                }),
+                size: "small"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              className: "cursor-pointer",
+              onClick: (e) => {
+                e.stopPropagation();
+                onPin?.(data._id);
+              },
+              children: [
+                isPinned ? /* @__PURE__ */ jsx(PinOff, { size: 16, className: "mr-0.5" }) : /* @__PURE__ */ jsx(Pin, { size: 16, className: "mr-0.5 rotate-45" }),
+                isPinned ? t("chat:action.unpin", { defaultValue: "B\u1ECF ghim" }) : t("chat:action.pinConversation", {
+                  defaultValue: "Ghim h\u1ED9i tho\u1EA1i"
+                })
+              ]
+            }
+          ),
+          showMarkUnread && /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              className: "cursor-pointer",
+              onClick: (e) => {
+                e.stopPropagation();
+                onMarkUnread?.(data._id);
+              },
+              children: [
+                /* @__PURE__ */ jsx(MailQuestion, { size: 16, className: "mr-0.5" }),
+                t("chat:action.markAsUnread", {
+                  defaultValue: "\u0110\xE1nh d\u1EA5u ch\u01B0a \u0111\u1ECDc"
+                })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] }) });
+};
+export {
+  ActionChatItem
+};