@abstractframework/panel-chat 0.1.0

package/dist/markdown.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./panel_chat.css";
+function highlightInline(text, state) {
+    const s = String(text ?? "");
+    if (!state || !state.needles.length)
+        return [s];
+    const out = [];
+    const hayLower = s.toLowerCase();
+    let pos = 0;
+    while (pos < s.length) {
+        let bestStart = -1;
+        let bestNeedle = "";
+        for (let i = 0; i < state.needlesLower.length; i++) {
+            const needleLower = state.needlesLower[i];
+            if (!needleLower)
+                continue;
+            const idx = hayLower.indexOf(needleLower, pos);
+            if (idx === -1)
+                continue;
+            const needle = state.needles[i] || "";
+            if (!needle)
+                continue;
+            if (bestStart === -1 || idx < bestStart || (idx === bestStart && needle.length > bestNeedle.length)) {
+                bestStart = idx;
+                bestNeedle = needle;
+            }
+        }
+        if (bestStart === -1 || !bestNeedle) {
+            out.push(s.slice(pos));
+            break;
+        }
+        if (bestStart > pos)
+            out.push(s.slice(pos, bestStart));
+        const id = state.hits === 0 && state.id ? state.id : undefined;
+        const matchedText = s.slice(bestStart, bestStart + bestNeedle.length);
+        out.push(_jsx("span", { id: id, className: state.className, children: matchedText }, `hl:${state.hits}`));
+        state.hits += 1;
+        pos = bestStart + bestNeedle.length;
+    }
+    return out;
+}
+function renderInline(text, highlight) {
+    const out = [];
+    const s = String(text ?? "");
+    let i = 0;
+    let buf = "";
+    const flush = () => {
+        if (!buf)
+            return;
+        for (const node of highlightInline(buf, highlight))
+            out.push(node);
+        buf = "";
+    };
+    while (i < s.length) {
+        const ch = s[i];
+        if (ch === "`") {
+            const j = s.indexOf("`", i + 1);
+            if (j !== -1) {
+                flush();
+                const inner = s.slice(i + 1, j);
+                out.push(_jsx("code", { children: highlight ? highlightInline(inner, highlight) : inner }, `code:${i}`));
+                i = j + 1;
+                continue;
+            }
+        }
+        if (ch === "*" && s[i + 1] === "*") {
+            const j = s.indexOf("**", i + 2);
+            if (j !== -1) {
+                flush();
+                const inner = s.slice(i + 2, j);
+                out.push(_jsx("strong", { children: highlight ? highlightInline(inner, highlight) : inner }, `bold:${i}`));
+                i = j + 2;
+                continue;
+            }
+        }
+        if (ch === "*" && s[i + 1] !== "*") {
+            const j = s.indexOf("*", i + 1);
+            if (j !== -1) {
+                flush();
+                const inner = s.slice(i + 1, j);
+                out.push(_jsx("em", { children: highlight ? highlightInline(inner, highlight) : inner }, `em:${i}`));
+                i = j + 1;
+                continue;
+            }
+        }
+        buf += ch;
+        i += 1;
+    }
+    flush();
+    return out;
+}
+function normalizeLines(text) {
+    const s = String(text ?? "").replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    return s.split("\n");
+}
+function splitTableRow(line) {
+    let s = String(line ?? "").trim();
+    if (!s)
+        return [];
+    if (s.startsWith("|"))
+        s = s.slice(1);
+    if (s.endsWith("|"))
+        s = s.slice(0, -1);
+    return s.split("|").map((c) => String(c ?? "").trim());
+}
+function isTableSeparator(line) {
+    let s = String(line ?? "").trim();
+    if (!s)
+        return false;
+    if (s.startsWith("|"))
+        s = s.slice(1);
+    if (s.endsWith("|"))
+        s = s.slice(0, -1);
+    const cells = s.split("|").map((c) => String(c ?? "").trim());
+    if (cells.length < 2)
+        return false;
+    return cells.every((c) => /^:?-{3,}:?$/.test(c));
+}
+export function Markdown({ text, className, highlight, highlights, highlightClassName, highlightId, }) {
+    const lines = normalizeLines(text);
+    const blocks = [];
+    const needlesRaw = [];
+    if (Array.isArray(highlights))
+        needlesRaw.push(...highlights);
+    if (typeof highlight === "string" && highlight.trim())
+        needlesRaw.push(highlight);
+    const needles = Array.from(new Set(needlesRaw.map((s) => String(s ?? "").trim()).filter(Boolean))).filter((n) => n.length >= 4);
+    const highlightState = needles.length
+        ? {
+            needles,
+            needlesLower: needles.map((n) => n.toLowerCase()),
+            className: highlightClassName || "pc-md_hl",
+            id: highlightId,
+            hits: 0,
+        }
+        : null;
+    let i = 0;
+    while (i < lines.length) {
+        const line = String(lines[i] ?? "");
+        if (!line.trim()) {
+            i += 1;
+            continue;
+        }
+        const hr = line.trim();
+        if (hr === "---" || hr === "___" || hr === "***" || /^(-{3,}|_{3,}|\*{3,})$/.test(hr)) {
+            blocks.push(_jsx("hr", { className: "pc-md_hr" }, `hr:${i}`));
+            i += 1;
+            continue;
+        }
+        if (line.trim().startsWith("```")) {
+            const fence = line.trim();
+            const lang = fence.replace(/```/g, "").trim();
+            const codeLines = [];
+            i += 1;
+            while (i < lines.length && !String(lines[i] ?? "").trim().startsWith("```")) {
+                codeLines.push(String(lines[i] ?? ""));
+                i += 1;
+            }
+            if (i < lines.length)
+                i += 1;
+            const code = codeLines.join("\n");
+            blocks.push(_jsx("pre", { className: "pc-md_pre", children: _jsx("code", { className: lang ? `language-${lang}` : undefined, children: code }) }, `pre:${i}`));
+            continue;
+        }
+        const headingM = line.match(/^(#{1,3})\s+(.*)$/);
+        if (headingM) {
+            const level = headingM[1].length;
+            const content = headingM[2] || "";
+            const nodes = renderInline(content, highlightState);
+            if (level === 1)
+                blocks.push(_jsx("h1", { children: nodes }, `h1:${i}`));
+            else if (level === 2)
+                blocks.push(_jsx("h2", { children: nodes }, `h2:${i}`));
+            else
+                blocks.push(_jsx("h3", { children: nodes }, `h3:${i}`));
+            i += 1;
+            continue;
+        }
+        if (line.trimStart().startsWith(">")) {
+            const quoteLines = [];
+            while (i < lines.length && String(lines[i] ?? "").trimStart().startsWith(">")) {
+                const raw = String(lines[i] ?? "");
+                const t = raw.trimStart();
+                quoteLines.push(t.replace(/^>\s?/, ""));
+                i += 1;
+            }
+            blocks.push(_jsx("blockquote", { className: "pc-md_quote", children: quoteLines.map((q, idx) => (_jsxs(React.Fragment, { children: [renderInline(q, highlightState), idx < quoteLines.length - 1 ? _jsx("br", {}) : null] }, `q:${i}:${idx}`))) }, `quote:${i}`));
+            continue;
+        }
+        if (line.includes("|") && i + 1 < lines.length && isTableSeparator(String(lines[i + 1] ?? ""))) {
+            const headers = splitTableRow(line);
+            const colCount = Math.max(1, headers.length);
+            const rows = [];
+            i += 2;
+            while (i < lines.length) {
+                const rowLine = String(lines[i] ?? "");
+                if (!rowLine.trim())
+                    break;
+                if (!rowLine.includes("|"))
+                    break;
+                const cells = splitTableRow(rowLine);
+                const normalized = [];
+                for (let c = 0; c < colCount; c++)
+                    normalized.push(cells[c] ?? "");
+                rows.push(normalized);
+                i += 1;
+            }
+            blocks.push(_jsx("div", { className: "pc-md_table_wrap", children: _jsxs("table", { className: "pc-md_table", children: [_jsx("thead", { children: _jsx("tr", { children: headers.slice(0, colCount).map((h, idx) => (_jsx("th", { children: renderInline(h, highlightState) }, `th:${i}:${idx}`))) }) }), _jsx("tbody", { children: rows.map((r, rIdx) => (_jsx("tr", { children: r.map((cell, cIdx) => (_jsx("td", { children: renderInline(cell, highlightState) }, `td:${i}:${rIdx}:${cIdx}`))) }, `tr:${i}:${rIdx}`))) })] }) }, `table:${i}`));
+            continue;
+        }
+        const isOrdered = (s) => /^\s*\d+\.\s+/.test(s);
+        if (isOrdered(line)) {
+            const items = [];
+            while (i < lines.length && isOrdered(String(lines[i] ?? ""))) {
+                const t = String(lines[i] ?? "");
+                items.push(t.replace(/^\s*\d+\.\s+/, ""));
+                i += 1;
+            }
+            blocks.push(_jsx("ol", { className: "pc-md_ol", children: items.map((it, idx) => (_jsx("li", { children: renderInline(it, highlightState) }, `oli:${i}:${idx}`))) }, `ol:${i}`));
+            continue;
+        }
+        const isBullet = (s) => {
+            const t = s.trimStart();
+            return t.startsWith("- ") || t.startsWith("* ");
+        };
+        if (isBullet(line)) {
+            const items = [];
+            while (i < lines.length && isBullet(String(lines[i] ?? ""))) {
+                const t = String(lines[i] ?? "").trimStart();
+                items.push(t.slice(2));
+                i += 1;
+            }
+            blocks.push(_jsx("ul", { className: "pc-md_ul", children: items.map((it, idx) => (_jsx("li", { children: renderInline(it, highlightState) }, `li:${i}:${idx}`))) }, `ul:${i}`));
+            continue;
+        }
+        const paraLines = [];
+        while (i < lines.length && String(lines[i] ?? "").trim()) {
+            paraLines.push(String(lines[i] ?? ""));
+            i += 1;
+        }
+        blocks.push(_jsx("p", { className: "pc-md_p", children: paraLines.map((pl, idx) => (_jsxs(React.Fragment, { children: [renderInline(pl, highlightState), idx < paraLines.length - 1 ? _jsx("br", {}) : null] }, `pl:${i}:${idx}`))) }, `p:${i}`));
+    }
+    const cls = ["pc-md", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: cls, children: blocks });
+}

package/dist/message_content.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./panel_chat.css";
+export declare function ChatMessageContent(props: {
+    text: string;
+    className?: string;
+    renderMarkdown?: (markdown: string) => React.ReactElement;
+    jsonCollapseAfterDepth?: number;
+}): React.ReactElement;
+//# sourceMappingURL=message_content.d.ts.map

package/dist/message_content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_content.d.ts","sourceRoot":"","sources":["../src/message_content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAM1B,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1D,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,GAAG,KAAK,CAAC,YAAY,CAsBrB"}

package/dist/message_content.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./panel_chat.css";
+import { JsonViewer } from "./json_viewer";
+import { Markdown } from "./markdown";
+import { tryParseJson } from "./utils";
+export function ChatMessageContent(props) {
+    const text = String(props.text ?? "");
+    const parsed = tryParseJson(text);
+    const cls = ["pc-chat-content", props.className].filter(Boolean).join(" ");
+    if (parsed !== null) {
+        return (_jsx("div", { className: cls, children: _jsx(JsonViewer, { value: parsed, collapseAfterDepth: props.jsonCollapseAfterDepth }) }));
+    }
+    if (props.renderMarkdown) {
+        return _jsx("div", { className: cls, children: props.renderMarkdown(text) });
+    }
+    return (_jsx("div", { className: cls, children: _jsx(Markdown, { text: text }) }));
+}

package/dist/types.d.ts

@@ -0,0 +1,8 @@
+export type PanelChatMessage = {
+    id?: string;
+    role: string;
+    content: string;
+    ts?: string;
+    title?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,16 @@
+export declare function tryParseJson(text: string): unknown | null;
+export declare function chatToMarkdown(messages: Array<{
+    role: string;
+    content: string;
+    ts?: string;
+    title?: string;
+}>, opts?: {
+    heading?: string;
+}): string;
+export declare function copyText(text: string): Promise<boolean>;
+export declare function downloadTextFile(opts: {
+    filename: string;
+    text: string;
+    mime?: string;
+}): void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CASzD;AA8BD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,IAAI,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAuBnJ;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAqB7D;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAc9F"}

package/dist/utils.js

@@ -0,0 +1,104 @@
+export function tryParseJson(text) {
+    const trimmed = String(text ?? "").trim();
+    if (!trimmed)
+        return null;
+    if (!((trimmed.startsWith("{") && trimmed.endsWith("}")) || (trimmed.startsWith("[") && trimmed.endsWith("]"))))
+        return null;
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch {
+        return null;
+    }
+}
+function safeJson(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string")
+        return value;
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+function formatMessageHeader(m) {
+    const role = String(m.role || "message").trim() || "message";
+    const title = String(m.title || "").trim();
+    const ts = String(m.ts || "").trim();
+    const parts = [role];
+    if (title)
+        parts.push(title);
+    if (ts)
+        parts.push(ts);
+    return parts.join(" · ");
+}
+function ensureTrailingNewline(s) {
+    return s.endsWith("\n") ? s : `${s}\n`;
+}
+function isAlreadyFenced(content) {
+    return String(content || "").trimStart().startsWith("```");
+}
+export function chatToMarkdown(messages, opts) {
+    const heading = String(opts?.heading || "Chat").trim() || "Chat";
+    const lines = [`# ${heading}`, ""];
+    for (const m of messages) {
+        const header = formatMessageHeader(m);
+        lines.push(`## ${header}`, "");
+        const content = String(m.content || "");
+        const parsed = tryParseJson(content);
+        if (parsed !== null && !isAlreadyFenced(content)) {
+            lines.push("```json", safeJson(parsed).trimEnd(), "```", "");
+        }
+        else {
+            lines.push(ensureTrailingNewline(content).trimEnd(), "");
+        }
+        lines.push("---", "");
+    }
+    // Drop trailing divider/newlines.
+    while (lines.length && !lines[lines.length - 1].trim())
+        lines.pop();
+    if (lines.length && lines[lines.length - 1] === "---")
+        lines.pop();
+    return `${lines.join("\n").trimEnd()}\n`;
+}
+export async function copyText(text) {
+    const value = String(text || "");
+    if (!value)
+        return false;
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        try {
+            const el = document.createElement("textarea");
+            el.value = value;
+            el.style.position = "fixed";
+            el.style.left = "-9999px";
+            document.body.appendChild(el);
+            el.select();
+            document.execCommand("copy");
+            document.body.removeChild(el);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+}
+export function downloadTextFile(opts) {
+    const filename = String(opts.filename || "").trim() || "export.txt";
+    const text = String(opts.text || "");
+    const mime = String(opts.mime || "text/plain;charset=utf-8");
+    const blob = new Blob([text], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@abstractframework/panel-chat",
+  "version": "0.1.0",
+  "description": "Shared chat panel components for AbstractFramework (extracted from AbstractCode; reusable by other UIs).",
+  "type": "module",
+  "author": "Laurent-Philippe Albou",
+  "license": "MIT",
+  "keywords": [
+    "abstractframework",
+    "chat",
+    "ui",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lpalbou/AbstractUIC.git",
+    "directory": "panel-chat"
+  },
+  "homepage": "https://github.com/lpalbou/AbstractUIC#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./panel_chat.css": "./src/panel_chat.css"
+  },
+  "files": [
+    "dist",
+    "src/panel_chat.css",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@abstractframework/ui-kit": "^0.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}