@abstractframework/panel-chat 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# @abstractuic/panel-chat
+
+Chat UI primitives for AbstractFramework-style UIs: thread rendering, message cards, a composer, and lightweight Markdown/JSON rendering.
+
+## Peer dependencies
+
+Declared in `panel-chat/package.json`:
+
+- `react@^18`, `react-dom@^18`
+- `@abstractuic/ui-kit` (icons used by `ChatMessageCard`)
+
+## Install
+
+- Workspace: add a dependency on `@abstractuic/panel-chat`
+- npm (once published): `npm i @abstractuic/panel-chat`
+
+## Exported API
+
+See `panel-chat/src/index.ts` for the authoritative export list. Common entry points:
+
+- Components: `ChatThread`, `ChatComposer`, `ChatMessageCard`, `ChatMessageContent`
+- Renderers: `Markdown`, `JsonViewer`
+- Types: `PanelChatMessage`, `ChatMessage`, `ChatAttachment`, `ChatStat`
+- Utils: `chatToMarkdown`, `copyText`, `downloadTextFile`, `tryParseJson`
+
+## Usage (typical)
+
+```tsx
+import React, { useState } from "react";
+import { ChatThread, ChatComposer, type ChatMessage } from "@abstractuic/panel-chat";
+
+export function ChatView() {
+  const [value, setValue] = useState("");
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+
+  return (
+    <>
+      <ChatThread messages={messages} autoScroll />
+      <ChatComposer value={value} onChange={setValue} onSubmit={() => setMessages((m) => [...m, { role: "user", content: value }])} />
+    </>
+  );
+}
+```
+
+## Rendering rules
+
+`ChatMessageContent` auto-detects JSON (via `tryParseJson` in `panel-chat/src/utils.ts`) and renders:
+
+- JSON ⇒ `JsonViewer`
+- otherwise ⇒ `Markdown` (or your `renderMarkdown` override)
+
+Markdown is intentionally minimal and implemented in `panel-chat/src/markdown.tsx` (headings 1–3, code fences, lists, tables, blockquotes, hr, emphasis, and optional highlighting).
+
+## Styling & theming
+
+- Components import `panel-chat/src/panel_chat.css`.
+- For consistent tokens (colors/typography), import `@abstractuic/ui-kit/src/theme.css` in your app.
+
+## Related docs
+
+- Getting started: [`docs/getting-started.md`](../docs/getting-started.md)
+- Architecture: [`docs/architecture.md`](../docs/architecture.md)

package/dist/chat_composer.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "./panel_chat.css";
+export type ChatComposerProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    busy?: boolean;
+    rows?: number;
+    autoFocus?: boolean;
+    className?: string;
+    textareaClassName?: string;
+    sendButtonClassName?: string;
+    sendLabel?: string;
+    busyLabel?: string;
+    actions?: React.ReactNode;
+};
+export declare const ChatComposer: React.ForwardRefExoticComponent<ChatComposerProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=chat_composer.d.ts.map

package/dist/chat_composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_composer.d.ts","sourceRoot":"","sources":["../src/chat_composer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,+FA6CvB,CAAC"}

package/dist/chat_composer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./panel_chat.css";
+export const ChatComposer = React.forwardRef(function ChatComposer(props, ref) {
+    const rows = typeof props.rows === "number" && Number.isFinite(props.rows) ? Math.max(1, Math.trunc(props.rows)) : 3;
+    const disabled = Boolean(props.disabled);
+    const busy = Boolean(props.busy);
+    const can_submit = !disabled && !busy && Boolean(String(props.value || "").trim());
+    return (_jsxs("div", { className: ["pc-composer", props.className].filter(Boolean).join(" "), children: [_jsx("textarea", { ref: ref, className: ["pc-composer__textarea", props.textareaClassName].filter(Boolean).join(" "), value: props.value, onChange: (e) => props.onChange(e.target.value), rows: rows, spellCheck: false, autoCorrect: "off", autoCapitalize: "off", autoComplete: "off", placeholder: props.placeholder || "", disabled: disabled, autoFocus: Boolean(props.autoFocus), onKeyDown: (e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        props.onSubmit();
+                    }
+                } }), _jsxs("div", { className: "pc-composer__row", children: [_jsx("div", { className: "pc-composer__actions", children: props.actions }), _jsx("button", { type: "button", className: props.sendButtonClassName || "pc-btn", disabled: !can_submit, onClick: () => props.onSubmit(), children: busy ? props.busyLabel || "Thinking…" : props.sendLabel || "Send" })] })] }));
+});

package/dist/chat_message_card.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import "./panel_chat.css";
+export type ChatMessageLevel = "info" | "warn" | "error";
+export type ChatMessage = {
+    id?: string;
+    role: string;
+    content: string;
+    ts?: string;
+    title?: string;
+    level?: ChatMessageLevel;
+    kind?: string;
+};
+export type ChatAttachment = {
+    id?: string;
+    label: string;
+    target?: string;
+    title?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+export type ChatStat = {
+    id?: string;
+    label: string;
+    title?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+};
+export type ChatMessageCardProps = {
+    message: ChatMessage;
+    className?: string;
+    renderMarkdown?: (markdown: string) => React.ReactElement;
+    attachments?: ChatAttachment[];
+    stats?: ChatStat[];
+    onSpeakToggle?: (message: ChatMessage) => void;
+    getSpeakState?: (message: ChatMessage) => "idle" | "loading" | "playing" | "paused";
+    showCopy?: boolean;
+    jsonCollapseAfterDepth?: number;
+};
+export declare function ChatMessageCard(props: ChatMessageCardProps): React.ReactElement;
+export default ChatMessageCard;
+//# sourceMappingURL=chat_message_card.d.ts.map

package/dist/chat_message_card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_message_card.d.ts","sourceRoot":"","sources":["../src/chat_message_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,kBAAkB,CAAC;AAO1B,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,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;IACf,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAyBF,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1D,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAqH/E;AAED,eAAe,eAAe,CAAC"}

package/dist/chat_message_card.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import "./panel_chat.css";
+import { Icon } from "@abstractframework/ui-kit";
+import { ChatMessageContent } from "./message_content";
+import { copyText } from "./utils";
+function _role_ui(m) {
+    const role = String(m.role || "").trim().toLowerCase() || "system";
+    const kind = String(m.kind || "").trim().toLowerCase();
+    const lvl = String(m.level || "").trim().toLowerCase();
+    if (role === "system" && kind === "report_bug") {
+        return { label: String(m.title || "").trim() || "Bug report", icon: "warning", variant: "report_bug" };
+    }
+    if (role === "system" && kind === "report_feature") {
+        return { label: String(m.title || "").trim() || "Feature request", icon: "check", variant: "report_feature" };
+    }
+    if (role === "user")
+        return { label: "You", icon: "user", variant: "user" };
+    if (role === "assistant")
+        return { label: "Agent", icon: "bot", variant: "assistant" };
+    const sys_label = String(m.title || "").trim() || (lvl === "error" ? "Error" : lvl === "warn" ? "Warning" : "System");
+    const sys_icon = lvl === "error" ? "error" : lvl === "warn" ? "warning" : "info";
+    const sys_variant = lvl === "error" ? "error" : lvl === "warn" ? "warn" : "status";
+    return { label: sys_label, icon: sys_icon, variant: sys_variant };
+}
+export function ChatMessageCard(props) {
+    const m = props.message;
+    const role_ui = useMemo(() => _role_ui(m), [m.kind, m.level, m.role, m.title]);
+    const ts = String(m.ts || "").trim();
+    const time_label = ts ? new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "";
+    const [copy_state, set_copy_state] = useState("idle");
+    const can_speak = typeof props.onSpeakToggle === "function" && role_ui.variant === "assistant" && Boolean(String(m.content || "").trim());
+    const speak_state = can_speak ? props.getSpeakState?.(m) || "idle" : "idle";
+    const speak_icon = speak_state === "loading" ? "loader" : speak_state === "playing" ? "pause" : "speaker";
+    const speak_title = speak_state === "loading"
+        ? "Generating audio…"
+        : speak_state === "playing"
+            ? "Pause"
+            : speak_state === "paused"
+                ? "Resume"
+                : "Speak (TTS)";
+    const show_copy = props.showCopy !== false;
+    const attachments = Array.isArray(props.attachments) ? props.attachments : [];
+    const stats = Array.isArray(props.stats) ? props.stats : [];
+    return (_jsxs("div", { className: ["pc-chat-item", `pc-chat-item--${role_ui.variant}`, props.className].filter(Boolean).join(" "), children: [_jsxs("div", { className: "pc-chat-header", children: [_jsx("div", { className: "pc-chat-avatar", "aria-hidden": "true", children: _jsx(Icon, { name: role_ui.icon, size: 14 }) }), _jsx("span", { className: "pc-chat-role", children: role_ui.label }), _jsx("span", { className: "pc-chat-header-spacer" }), time_label ? _jsx("span", { className: "pc-chat-time", children: time_label }) : null, _jsxs("div", { className: "pc-chat-header-actions", children: [can_speak ? (_jsx("button", { className: "pc-chat-icon-btn", type: "button", "aria-label": speak_title, title: speak_title, onClick: () => props.onSpeakToggle?.(m), children: _jsx(Icon, { name: speak_icon, size: 22 }) })) : null, show_copy ? (_jsx("button", { className: `pc-chat-icon-btn ${copy_state !== "idle" ? `pc-chat-icon-btn--${copy_state}` : ""}`.trim(), type: "button", "aria-label": "Copy message", title: copy_state === "idle" ? "Copy" : copy_state === "copied" ? "Copied" : "Copy failed", onClick: async () => {
+                                    const ok = await copyText(String(m.content || ""));
+                                    set_copy_state(ok ? "copied" : "failed");
+                                    window.setTimeout(() => set_copy_state("idle"), 900);
+                                }, children: _jsx(Icon, { name: "copy", size: 22 }) })) : null] })] }), _jsx("div", { className: "pc-chat-body", children: _jsx(ChatMessageContent, { text: String(m.content || ""), renderMarkdown: props.renderMarkdown, jsonCollapseAfterDepth: props.jsonCollapseAfterDepth }) }), attachments.length ? (_jsx("div", { className: "pc-chat-attachments", "aria-label": "Attachments", children: attachments.slice(0, 24).map((a, idx) => {
+                    const label = String(a.label || "").trim() || "attachment";
+                    const target = String(a.target || "").trim();
+                    const title = String(a.title || "").trim();
+                    const disabled = Boolean(a.disabled) || typeof a.onClick !== "function";
+                    return (_jsxs("button", { type: "button", className: "pc-chat-attachment-chip", title: title || label, onClick: disabled ? undefined : a.onClick, disabled: disabled, children: [_jsx(Icon, { name: "paperclip", size: 14 }), target ? _jsx("span", { className: `pc-chat-attachment-target pc-chat-attachment-target--${target}`, children: target }) : null, _jsx("span", { className: "pc-chat-attachment-name", children: label })] }, a.id || `${label}:${idx}`));
+                }) })) : null, stats.length ? (_jsx("div", { className: "pc-chat-stats", "aria-label": "Stats", children: stats.slice(0, 12).map((s, idx) => {
+                    const label = String(s.label || "").trim();
+                    if (!label)
+                        return null;
+                    const title = String(s.title || "").trim();
+                    const clickable = typeof s.onClick === "function";
+                    return (_jsxs("button", { type: "button", className: ["pc-chat-stat", clickable ? "pc-chat-stat--clickable" : ""].filter(Boolean).join(" "), title: title || undefined, onClick: clickable ? () => s.onClick?.() : undefined, disabled: !clickable, children: [s.icon ? _jsx("span", { className: "pc-chat-stat-icon", "aria-hidden": "true", children: s.icon }) : null, _jsx("span", { className: "pc-chat-stat-label", children: label })] }, s.id || `${label}:${idx}`));
+                }) })) : null] }));
+}
+export default ChatMessageCard;

package/dist/chat_thread.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./panel_chat.css";
+import { type ChatMessage, type ChatMessageCardProps } from "./chat_message_card";
+export type ChatThreadProps = {
+    messages: ChatMessage[];
+    className?: string;
+    empty?: React.ReactNode;
+    autoScroll?: boolean;
+    autoScrollThresholdPx?: number;
+    messageProps?: Omit<ChatMessageCardProps, "message">;
+};
+export declare function ChatThread(props: ChatThreadProps): React.ReactElement;
+export default ChatThread;
+//# sourceMappingURL=chat_thread.d.ts.map

package/dist/chat_thread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_thread.d.ts","sourceRoot":"","sources":["../src/chat_thread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEnG,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;CACtD,CAAC;AAQF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAoCrE;AAED,eAAe,UAAU,CAAC"}

package/dist/chat_thread.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import "./panel_chat.css";
+import { ChatMessageCard } from "./chat_message_card";
+function is_near_bottom(el, thresholdPx) {
+    const thr = Math.max(0, Math.trunc(thresholdPx));
+    const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
+    return remaining <= thr;
+}
+export function ChatThread(props) {
+    const threshold = typeof props.autoScrollThresholdPx === "number" && Number.isFinite(props.autoScrollThresholdPx) ? props.autoScrollThresholdPx : 120;
+    const auto = props.autoScroll !== false;
+    const list_ref = useRef(null);
+    const bottom_ref = useRef(null);
+    const [stick, set_stick] = useState(true);
+    const msgs = useMemo(() => (Array.isArray(props.messages) ? props.messages : []), [props.messages]);
+    useEffect(() => {
+        if (!auto)
+            return;
+        const el = list_ref.current;
+        if (!el)
+            return;
+        const on_scroll = () => {
+            set_stick(is_near_bottom(el, threshold));
+        };
+        el.addEventListener("scroll", on_scroll, { passive: true });
+        on_scroll();
+        return () => el.removeEventListener("scroll", on_scroll);
+    }, [auto, threshold]);
+    useEffect(() => {
+        if (!auto)
+            return;
+        if (!stick)
+            return;
+        bottom_ref.current?.scrollIntoView({ block: "end" });
+    }, [auto, stick, msgs.length]);
+    return (_jsxs("div", { ref: list_ref, className: ["pc-chat-thread", props.className].filter(Boolean).join(" "), children: [!msgs.length ? props.empty || null : null, msgs.map((m, idx) => (_jsx(ChatMessageCard, { message: m, ...(props.messageProps || {}) }, String(m.id || "") || String(m.ts || "") + ":" + String(m.role || "") + ":" + idx))), _jsx("div", { ref: bottom_ref })] }));
+}
+export default ChatThread;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { ChatMessageContent } from "./message_content";
+export { ChatComposer } from "./chat_composer";
+export { Markdown } from "./markdown";
+export { JsonViewer } from "./json_viewer";
+export { ChatMessageCard } from "./chat_message_card";
+export { ChatThread } from "./chat_thread";
+export type { PanelChatMessage } from "./types";
+export type { ChatAttachment, ChatMessage, ChatMessageLevel, ChatStat } from "./chat_message_card";
+export { chatToMarkdown, copyText, downloadTextFile, tryParseJson } from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export { ChatMessageContent } from "./message_content";
+export { ChatComposer } from "./chat_composer";
+export { Markdown } from "./markdown";
+export { JsonViewer } from "./json_viewer";
+export { ChatMessageCard } from "./chat_message_card";
+export { ChatThread } from "./chat_thread";
+export { chatToMarkdown, copyText, downloadTextFile, tryParseJson } from "./utils";

package/dist/json_viewer.d.ts

@@ -0,0 +1,8 @@
+import "./panel_chat.css";
+export declare function JsonViewer(props: {
+    value: unknown;
+    className?: string;
+    collapseAfterDepth?: number;
+    showCopy?: boolean;
+}): React.ReactElement;
+//# sourceMappingURL=json_viewer.d.ts.map

package/dist/json_viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json_viewer.d.ts","sourceRoot":"","sources":["../src/json_viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,kBAAkB,CAAC;AAoJ1B,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAsB7I"}

package/dist/json_viewer.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import "./panel_chat.css";
+function isJsonObject(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isJsonArray(value) {
+    return Array.isArray(value);
+}
+function copyStringForJson(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string")
+        return value;
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+async function copyText(text) {
+    const value = String(text || "");
+    if (!value)
+        return;
+    try {
+        await navigator.clipboard.writeText(value);
+    }
+    catch {
+        const el = document.createElement("textarea");
+        el.value = value;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand("copy");
+        document.body.removeChild(el);
+    }
+}
+function Token({ kind, children, }) {
+    return _jsx("span", { className: `pc-json-token ${kind}`, children: children });
+}
+function renderPrimitive(value) {
+    if (value === null)
+        return _jsx(Token, { kind: "null", children: "null" });
+    if (typeof value === "string")
+        return _jsx(Token, { kind: "string", children: JSON.stringify(value) });
+    if (typeof value === "number")
+        return _jsx(Token, { kind: "number", children: String(value) });
+    if (typeof value === "boolean")
+        return _jsx(Token, { kind: "boolean", children: value ? "true" : "false" });
+    return _jsx(Token, { kind: "string", children: JSON.stringify(String(value)) });
+}
+function countSummary(value) {
+    if (isJsonArray(value))
+        return value.length === 1 ? "1 item" : `${value.length} items`;
+    if (isJsonObject(value))
+        return Object.keys(value).length === 1 ? "1 key" : `${Object.keys(value).length} keys`;
+    return "";
+}
+function JsonNode(props) {
+    const { label, value, depth, collapseAfterDepth, trailingComma } = props;
+    const indentPx = depth * 14;
+    const isObject = isJsonObject(value);
+    const isArray = isJsonArray(value);
+    const isContainer = isObject || isArray;
+    const defaultOpen = depth < collapseAfterDepth;
+    const [open, setOpen] = useState(defaultOpen);
+    const prefix = label ? (_jsxs(_Fragment, { children: [_jsx(Token, { kind: "key", children: JSON.stringify(label) }), ": "] })) : null;
+    if (!isContainer) {
+        return (_jsxs("div", { className: "pc-json-viewer__line", style: { paddingLeft: indentPx }, children: [prefix, renderPrimitive(value), trailingComma ? "," : ""] }));
+    }
+    const containerOpen = isArray ? "[" : "{";
+    const containerClose = isArray ? "]" : "}";
+    const summaryText = countSummary(value);
+    const summaryValue = open ? `${containerOpen}` : `${containerOpen}…${containerClose}${summaryText ? `  (${summaryText})` : ""}`;
+    const entries = isArray
+        ? value.map((v, i) => ({ key: String(i), label: undefined, value: v }))
+        : Object.entries(value).map(([k, v]) => ({ key: k, label: k, value: v }));
+    return (_jsxs("details", { className: "pc-json-viewer__details", open: open, onToggle: (e) => setOpen(e.currentTarget.open), children: [_jsxs("summary", { className: "pc-json-viewer__summary", style: { paddingLeft: indentPx }, children: [prefix, _jsx("span", { className: "pc-json-viewer__caret", "aria-hidden": "true", children: open ? "▾" : "▸" }), _jsx("span", { className: "pc-json-viewer__punct", children: summaryValue }), !open && trailingComma ? _jsx("span", { className: "pc-json-viewer__punct", children: "," }) : null] }), open ? (_jsx("div", { className: "pc-json-viewer__children", children: entries.length === 0 ? (_jsxs("div", { className: "pc-json-viewer__line", style: { paddingLeft: indentPx }, children: [_jsx("span", { className: "pc-json-viewer__punct", children: containerClose }), trailingComma ? "," : ""] })) : (_jsxs(_Fragment, { children: [entries.map((e, idx) => {
+                            const isLast = idx === entries.length - 1;
+                            return (_jsx(JsonNode, { label: e.label, value: e.value, depth: depth + 1, collapseAfterDepth: collapseAfterDepth, trailingComma: !isLast }, `${depth}:${label || "root"}:${e.key}`));
+                        }), _jsxs("div", { className: "pc-json-viewer__line", style: { paddingLeft: indentPx }, children: [_jsx("span", { className: "pc-json-viewer__punct", children: containerClose }), trailingComma ? "," : ""] })] })) })) : null] }));
+}
+export function JsonViewer(props) {
+    const { value, className, showCopy = true } = props;
+    const collapseAfterDepth = Number.isFinite(props.collapseAfterDepth ?? NaN) ? Number(props.collapseAfterDepth) : 3;
+    const copyValue = useMemo(() => copyStringForJson(value), [value]);
+    const cls = ["pc-json-viewer", className].filter(Boolean).join(" ");
+    return (_jsxs("div", { className: cls, children: [showCopy ? (_jsx("div", { className: "pc-json-viewer__toolbar", children: _jsx("button", { type: "button", className: "pc-btn pc-json-viewer__copy", onClick: () => void copyText(copyValue), children: "Copy" }) })) : null, _jsx("div", { className: "pc-json-viewer__tree", role: "tree", "aria-label": "JSON viewer", children: _jsx(JsonNode, { value: value, depth: 0, collapseAfterDepth: collapseAfterDepth, trailingComma: false }) })] }));
+}

package/dist/markdown.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./panel_chat.css";
+export declare function Markdown({ text, className, highlight, highlights, highlightClassName, highlightId, }: {
+    text: string;
+    className?: string;
+    highlight?: string;
+    highlights?: string[];
+    highlightClassName?: string;
+    highlightId?: string;
+}): React.ReactElement;
+//# sourceMappingURL=markdown.d.ts.map

package/dist/markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../src/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAqI1B,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,WAAW,GACZ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,YAAY,CAuLrB"}