telygent-ui 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telygent-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Telygent UI CLI",
   "type": "commonjs",
   "main": "dist/index.js",

package/registry/components/ChatInterface.tsx

@@ -6,8 +6,9 @@ import {MarkdownRenderer} from "./MarkdownRenderer";
 import AIWriter from "react-aiwriter";
 import * as echarts from "echarts";
 import type {EChartsOption} from "echarts";
+import {Check, Copy, Download} from "lucide-react";
 
-import {cn} from "@/lib/utils";
+import {cn} from "./utils";
 import {type ChatMessage, type ChatSummaryCard, type ChatVisualization} from "./ChatProvider";
 import {useDatabaseChat} from "../hooks/use-database-chat";
 
@@ -17,8 +18,17 @@ const MemoizedAIWriter = React.memo(({children}: {children: React.ReactNode}) =>
 });
 MemoizedAIWriter.displayName = "MemoizedAIWriter";
 
-const EChart = ({option}: {option: EChartsOption}) => {
+const getChartFilename = (seed: string) => {
+  const normalized = seed
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return normalized || "chart";
+};
+
+const EChart = ({option, fileName}: {option: EChartsOption; fileName: string}) => {
   const chartRef = React.useRef<HTMLDivElement>(null);
+  const chartInstanceRef = React.useRef<echarts.ECharts | null>(null);
 
   React.useEffect(() => {
     if (!chartRef.current) {
@@ -26,6 +36,7 @@ const EChart = ({option}: {option: EChartsOption}) => {
     }
 
     const instance = echarts.init(chartRef.current);
+    chartInstanceRef.current = instance;
     instance.setOption(option);
 
     const handleResize = () => instance.resize();
@@ -34,10 +45,130 @@ const EChart = ({option}: {option: EChartsOption}) => {
     return () => {
       window.removeEventListener("resize", handleResize);
       instance.dispose();
+      chartInstanceRef.current = null;
     };
   }, [option]);
 
-  return <div ref={chartRef} className="h-64 w-full" />;
+  const handleExportChart = React.useCallback(() => {
+    const instance = chartInstanceRef.current;
+    if (!instance) {
+      return;
+    }
+
+    try {
+      const dataUrl = instance.getDataURL({
+        type: "png",
+        pixelRatio: 2,
+        backgroundColor: "#ffffff",
+      });
+
+      const link = document.createElement("a");
+      link.href = dataUrl;
+      link.download = `${getChartFilename(fileName)}.png`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (error) {
+      console.error("Unable to export chart image.", error);
+    }
+  }, [fileName]);
+
+  return (
+    <div>
+      <div ref={chartRef} className="h-64 w-full" />
+      <button
+        type="button"
+        onClick={handleExportChart}
+        className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-slate-600 transition hover:text-slate-700"
+        aria-label="Export chart as PNG"
+      >
+        <Download className="h-4 w-4" />
+        <span>Export PNG</span>
+      </button>
+    </div>
+  );
+};
+
+const inlineComputedStyles = (source: Element, target: Element) => {
+  const style = window.getComputedStyle(source);
+  const css = Array.from(style)
+    .map((property) => `${property}: ${style.getPropertyValue(property)};`)
+    .join(" ");
+
+  (target as HTMLElement).setAttribute("style", css);
+
+  const sourceChildren = Array.from(source.children);
+  const targetChildren = Array.from(target.children);
+  sourceChildren.forEach((child, index) => {
+    const targetChild = targetChildren[index];
+    if (!targetChild) {
+      return;
+    }
+    inlineComputedStyles(child, targetChild);
+  });
+};
+
+const replaceCanvasWithImages = (sourceRoot: HTMLElement, targetRoot: HTMLElement) => {
+  const sourceCanvases = Array.from(sourceRoot.querySelectorAll("canvas"));
+  const targetCanvases = Array.from(targetRoot.querySelectorAll("canvas"));
+
+  sourceCanvases.forEach((sourceCanvas, index) => {
+    const targetCanvas = targetCanvases[index];
+    if (!targetCanvas) {
+      return;
+    }
+
+    try {
+      const img = document.createElement("img");
+      img.src = sourceCanvas.toDataURL("image/png");
+      const canvasStyle = window.getComputedStyle(sourceCanvas);
+      img.style.width = canvasStyle.width;
+      img.style.height = canvasStyle.height;
+      img.style.display = canvasStyle.display;
+      targetCanvas.replaceWith(img);
+    } catch (_error) {
+      // Canvas could be tainted in some host apps; leave it as-is on failure.
+    }
+  });
+};
+
+const normalizeCopiedText = (renderedText: string, fallbackText: string) => {
+  const source = (renderedText || fallbackText || "").replace(/\r\n/g, "\n");
+  return source
+    .replace(/[ \t]+\n/g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+};
+
+const copyStyledMessage = async (sourceElement: HTMLElement, plainText: string) => {
+  const cloned = sourceElement.cloneNode(true) as HTMLElement;
+  inlineComputedStyles(sourceElement, cloned);
+  replaceCanvasWithImages(sourceElement, cloned);
+
+  const richHtml = `<div>${cloned.outerHTML}</div>`;
+  const richTextFallback = normalizeCopiedText(sourceElement.innerText, plainText);
+  const clipboard = navigator.clipboard;
+  const ClipboardItemCtor = (window as any).ClipboardItem;
+
+  if (clipboard?.write && ClipboardItemCtor) {
+    try {
+      const item = new ClipboardItemCtor({
+        "text/html": new Blob([richHtml], {type: "text/html"}),
+        "text/plain": new Blob([richTextFallback], {type: "text/plain"}),
+      });
+      await clipboard.write([item]);
+      return;
+    } catch (_error) {
+      // Some hosts reject rich clipboard types; fall back to plain text below.
+    }
+  }
+
+  if (clipboard?.writeText) {
+    await clipboard.writeText(richTextFallback);
+    return;
+  }
+
+  throw new Error("Clipboard API unavailable.");
 };
 
 const renderVisualization = (viz: ChatVisualization, key: string) => {
@@ -45,12 +176,13 @@ const renderVisualization = (viz: ChatVisualization, key: string) => {
     return null;
   }
 
+  const chartName = viz.title || key || "chart";
   return (
     <div key={key} className="rounded-2xl border border-slate-200 bg-white p-3">
       {viz.title ? (
         <p className="mb-2 text-sm font-semibold text-slate-700">{viz.title}</p>
       ) : null}
-      <EChart option={viz.options as EChartsOption} />
+      <EChart option={viz.options as EChartsOption} fileName={chartName} />
     </div>
   );
 };
@@ -101,6 +233,26 @@ const renderMessageWithRichContent = (
   );
   const usedVizIds = new Set<string>();
   const usedCardIds = new Set<string>();
+  const cardBuffer: React.ReactNode[] = [];
+  let cardGroupIndex = 0;
+
+  const flushCards = () => {
+    if (!cardBuffer.length) {
+      return;
+    }
+    if (cardBuffer.length === 1) {
+      parts.push(cardBuffer[0]);
+      cardBuffer.length = 0;
+      return;
+    }
+    parts.push(
+      <div key={`card-grid-${cardGroupIndex}`} className="grid gap-4 md:grid-cols-2">
+        {cardBuffer}
+      </div>
+    );
+    cardBuffer.length = 0;
+    cardGroupIndex += 1;
+  };
 
   let match: RegExpExecArray | null;
   let lastIndex = 0;
@@ -114,6 +266,7 @@ const renderMessageWithRichContent = (
     if (start > lastIndex) {
       const text = message.slice(lastIndex, start).trim();
       if (text) {
+        flushCards();
         parts.push(
           isLatest ? (
             <MemoizedAIWriter key={`text-${start}`}>
@@ -129,6 +282,7 @@ const renderMessageWithRichContent = (
     if (type === "viz") {
       const viz = vizById.get(id);
       if (viz) {
+        flushCards();
         usedVizIds.add(id);
         parts.push(renderVisualization(viz, `viz-${id}-${start}`));
       }
@@ -138,7 +292,7 @@ const renderMessageWithRichContent = (
       const card = cardsById.get(id);
       if (card) {
         usedCardIds.add(id);
-        parts.push(renderSummaryCard(card, `card-${id}-${start}`));
+        cardBuffer.push(renderSummaryCard(card, `card-${id}-${start}`));
       }
     }
 
@@ -147,6 +301,7 @@ const renderMessageWithRichContent = (
 
   const trailing = message.slice(lastIndex).trim();
   if (trailing) {
+    flushCards();
     parts.push(
       isLatest ? (
         <MemoizedAIWriter key={`text-${lastIndex}`}>
@@ -157,18 +312,24 @@ const renderMessageWithRichContent = (
       )
     );
   }
+  flushCards();
 
   const unused = visualizations.filter((viz) => !viz.id || !usedVizIds.has(viz.id));
   const unusedCards = summaryCards.filter((card) => !card.id || !usedCardIds.has(card.id));
   if (unused.length || unusedCards.length) {
+    const unusedCardItems = unusedCards.map((card, cardIndex) =>
+      renderSummaryCard(card, `card-unused-${card.id ?? cardIndex}`)
+    );
     parts.push(
       <div key="viz-unused" className="mt-4 space-y-4">
         {unused.map((viz, vizIndex) =>
           renderVisualization(viz, `viz-unused-${viz.id ?? vizIndex}`)
         )}
-        {unusedCards.map((card, cardIndex) =>
-          renderSummaryCard(card, `card-unused-${card.id ?? cardIndex}`)
-        )}
+        {unusedCardItems.length === 1 ? (
+          unusedCardItems[0]
+        ) : unusedCardItems.length > 1 ? (
+          <div className="grid gap-4 md:grid-cols-2">{unusedCardItems}</div>
+        ) : null}
       </div>
     );
   }
@@ -176,6 +337,52 @@ const renderMessageWithRichContent = (
   return <div className="space-y-4">{parts}</div>;
 };
 
+const AssistantMessageBody = React.memo(function AssistantMessageBody({
+  item,
+  isLatestMessage,
+}: {
+  item: ChatMessage;
+  isLatestMessage: boolean;
+}) {
+  return (
+    <div className="mdx text-sm text-slate-700 max-w-none">
+      {item.status === "thinking" ? (
+        <p className="mb-3 flex items-center gap-2 text-xs text-slate-400">
+          <span className="h-3 w-3 animate-pulse rounded-full bg-slate-400" />
+          <span>Thinking…</span>
+        </p>
+      ) : null}
+      {(item.visualizations && item.visualizations.length > 0) ||
+      (item.summaryCards && item.summaryCards.length > 0)
+        ? renderMessageWithRichContent(
+            item.content,
+            item.visualizations ?? [],
+            item.summaryCards ?? [],
+            isLatestMessage
+          )
+        : isLatestMessage
+        ? (
+          <MemoizedAIWriter>
+            <MarkdownRenderer>{item.content || ""}</MarkdownRenderer>
+          </MemoizedAIWriter>
+        )
+        : (
+          <MarkdownRenderer>{item.content || ""}</MarkdownRenderer>
+        )}
+    </div>
+  );
+});
+AssistantMessageBody.displayName = "AssistantMessageBody";
+
+const UserMessageBody = React.memo(function UserMessageBody({content}: {content: string}) {
+  return (
+    <div className="mdx p-4 text-sm leading-relaxed">
+      <MarkdownRenderer>{content}</MarkdownRenderer>
+    </div>
+  );
+});
+UserMessageBody.displayName = "UserMessageBody";
+
 export type ChatInterfaceProps = {
   className?: string;
   viewContext?: string;
@@ -211,6 +418,9 @@ export function ChatInterface({
   const containerRef = React.useRef<HTMLDivElement>(null);
   const scrollRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  const messageContentRefs = React.useRef<Record<string, HTMLDivElement | null>>({});
+  const copyResetTimerRef = React.useRef<number | null>(null);
+  const [copiedMessageKey, setCopiedMessageKey] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     if (!timeline.length) {
@@ -224,11 +434,45 @@ export function ChatInterface({
     }
   }, [timeline, loading]);
 
+  React.useEffect(() => {
+    return () => {
+      if (copyResetTimerRef.current !== null) {
+        window.clearTimeout(copyResetTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopyMessage = React.useCallback(async (messageKey: string, plainText: string) => {
+    const sourceElement = messageContentRefs.current[messageKey];
+    if (!sourceElement) {
+      return;
+    }
+
+    try {
+      await copyStyledMessage(sourceElement, plainText);
+      setCopiedMessageKey(messageKey);
+
+      if (copyResetTimerRef.current !== null) {
+        window.clearTimeout(copyResetTimerRef.current);
+      }
+
+      copyResetTimerRef.current = window.setTimeout(() => {
+        setCopiedMessageKey((current) => (current === messageKey ? null : current));
+      }, 1800);
+    } catch (error) {
+      console.error("Unable to copy message content.", error);
+    }
+  }, []);
+
   const renderedTimeline = React.useMemo(() => {
-    return timeline.map((item: ChatMessage, index: number) =>
-      item.role === "assistant" ? (
+    return timeline.map((item: ChatMessage, index: number) => {
+      const messageKey = item.id ? `${item.role}-${item.id}` : `${item.role}-${index}`;
+      const isLatestMessage = timeline.length === index + 1;
+      const hasCopied = copiedMessageKey === messageKey;
+
+      return item.role === "assistant" ? (
         <div
-          key={index}
+          key={messageKey}
           className="flex flex-col gap-3 animate-in fade-in slide-in-from-bottom-2 duration-500"
         >
           <div className="flex items-center gap-3">
@@ -242,58 +486,74 @@ export function ChatInterface({
               </p>
             </div>
           </div>
-          <div
-            className={cn(
-              "ml-12 rounded-3xl rounded-tl-sm border border-slate-200 bg-white/90 p-4 shadow-[0_12px_30px_rgba(0,0,0,0.08)]",
-              item.status === "thinking"
-                ? "min-h-[76px] h-auto overflow-y-auto"
-                : ""
-            )}
-          >
-            <div className="mdx text-sm text-slate-700 max-w-none">
-              {item.status === "thinking" ? (
-                <p className="mb-3 flex items-center gap-2 text-xs text-slate-400">
-                  <span className="h-3 w-3 animate-pulse rounded-full bg-slate-400" />
-                  <span>Thinking…</span>
-                </p>
-              ) : null}
-              {(item.visualizations && item.visualizations.length > 0) ||
-              (item.summaryCards && item.summaryCards.length > 0)
-                ? renderMessageWithRichContent(
-                    item.content,
-                    item.visualizations ?? [],
-                    item.summaryCards ?? [],
-                    timeline.length === index + 1
-                  )
-                : timeline.length === index + 1
-                ? (
-                  <MemoizedAIWriter>
-                    <MarkdownRenderer>{item.content || ""}</MarkdownRenderer>
-                  </MemoizedAIWriter>
-                )
-                : (
-                  <MarkdownRenderer>{item.content || ""}</MarkdownRenderer>
-                )}
+          <div className="ml-12">
+            <div
+              className={cn(
+                "rounded-3xl rounded-tl-sm border border-slate-200 bg-white/90 p-4 shadow-[0_12px_30px_rgba(0,0,0,0.08)]",
+                item.status === "thinking"
+                  ? "min-h-[76px] h-auto overflow-y-auto"
+                  : ""
+              )}
+              ref={(node) => {
+                messageContentRefs.current[messageKey] = node;
+              }}
+            >
+              <AssistantMessageBody item={item} isLatestMessage={isLatestMessage} />
             </div>
+            <button
+              type="button"
+              onClick={() => {
+                void handleCopyMessage(messageKey, item.content || "");
+              }}
+              className="mt-1 inline-flex items-center gap-1 text-[11px] font-medium text-slate-600 transition hover:text-slate-700"
+              aria-label="Copy formatted message"
+            >
+              {hasCopied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+              {hasCopied ? <span>Copied</span> : null}
+            </button>
           </div>
         </div>
       ) : (
         <div
-          key={index}
+          key={messageKey}
           className="flex flex-col items-end gap-2 animate-in fade-in slide-in-from-bottom-2 duration-500"
         >
           <p className="text-xs text-slate-500">
             {moment(item.createdAt ?? new Date()).fromNow()}
           </p>
-          <div className="max-w-[85%] rounded-3xl rounded-tr-sm bg-slate-900 text-white shadow-[0_20px_40px_rgba(15,23,42,0.25)]">
-            <div className="mdx p-4 text-sm leading-relaxed">
-              <MarkdownRenderer>{item.content}</MarkdownRenderer>
+          <div className="max-w-[85%]">
+            <div
+              className="rounded-3xl rounded-tr-sm bg-slate-900 text-white shadow-[0_20px_40px_rgba(15,23,42,0.25)]"
+              ref={(node) => {
+                messageContentRefs.current[messageKey] = node;
+              }}
+            >
+              <UserMessageBody content={item.content} />
             </div>
+            <button
+              type="button"
+              onClick={() => {
+                void handleCopyMessage(messageKey, item.content || "");
+              }}
+              className="mt-1 inline-flex items-center gap-1 text-[11px] font-medium text-slate-600 transition hover:text-slate-700"
+              aria-label="Copy formatted message"
+            >
+              {hasCopied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+              {hasCopied ? <span>Copied</span> : null}
+            </button>
           </div>
         </div>
       )
-    );
-  }, [timeline]);
+    });
+  }, [timeline, copiedMessageKey, handleCopyMessage, aiName]);
   const hasThinkingPlaceholder = React.useMemo(() => {
     if (!timeline.length) {
       return false;

package/registry/components/utils.ts

@@ -0,0 +1,6 @@
+import {type ClassValue, clsx} from "clsx";
+import {twMerge} from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/registry/index.json

@@ -7,6 +7,7 @@
         "components/ChatProvider.tsx",
         "components/ChatInterface.tsx",
         "components/MarkdownRenderer.tsx",
+        "components/utils.ts",
         "components/ai-mdx.css",
         "hooks/use-database-chat.ts",
         "hooks/use-rtk-stream-adapter.ts"
@@ -16,7 +17,9 @@
         "markdown-to-jsx",
         "react-aiwriter",
         "moment",
-        "lucide-react"
+        "lucide-react",
+        "clsx",
+        "tailwind-merge"
       ],
       "peerDependencies": [
         "@reduxjs/toolkit"