telygent-ui 0.1.6 → 0.1.8

package/README.md

@@ -18,9 +18,9 @@ import {ChatProvider, type SendMessageInput, type SendMessageResult, type ChatMe
 import {ChatInterface} from "@/components/ai/ChatInterface";
 
 const adapter = {
-  async sendMessage({message, conversationId}: SendMessageInput): Promise<SendMessageResult> {
+  async sendMessage({message, conversationId, messageContext}: SendMessageInput): Promise<SendMessageResult> {
     // Use React Query, Axios, RTK Query, etc.
-    const response = await api.send({message, conversationId});
+    const response = await api.send({message, conversationId, messageContext});
     return {
       conversationId: response.conversationId,
       message: {
@@ -45,9 +45,10 @@ const adapter = {
 
 export default function Page() {
   const conversationId = "your-conversation-id";
+  const messageContext = "Viewing document id: 3283823883";
   return (
     <ChatProvider adapter={adapter}>
-      <ChatInterface conversationId={conversationId} aiName="Telygent" />
+      <ChatInterface conversationId={conversationId} aiName="Telygent" messageContext={messageContext} />
     </ChatProvider>
   );
 }
@@ -68,6 +69,7 @@ async function* streamChat(input: SendMessageInput): AsyncIterable<ChatStreamEve
     body: JSON.stringify({
       question: input.message,
       conversationId: input.conversationId,
+      messageContext: input.messageContext,
     }),
   });
 
@@ -111,7 +113,7 @@ const adapter = {
 export default function Page() {
   return (
     <ChatProvider adapter={adapter}>
-      <ChatInterface conversationId="conv_123" />
+      <ChatInterface conversationId="conv_123" messageContext="Viewing transaction id: txn_123" />
     </ChatProvider>
   );
 }

package/package.json

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

package/registry/components/ChatInterface.tsx

@@ -6,9 +6,9 @@ import {MarkdownRenderer} from "./MarkdownRenderer";
 import AIWriter from "react-aiwriter";
 import * as echarts from "echarts";
 import type {EChartsOption} from "echarts";
-import {Check, Copy} from "lucide-react";
+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";
 
@@ -18,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) {
@@ -27,6 +36,7 @@ const EChart = ({option}: {option: EChartsOption}) => {
     }
 
     const instance = echarts.init(chartRef.current);
+    chartInstanceRef.current = instance;
     instance.setOption(option);
 
     const handleResize = () => instance.resize();
@@ -35,10 +45,48 @@ 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) => {
@@ -128,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>
   );
 };
@@ -336,7 +385,7 @@ UserMessageBody.displayName = "UserMessageBody";
 
 export type ChatInterfaceProps = {
   className?: string;
-  viewContext?: string;
+  messageContext?: string;
   placeholder?: string;
   defaultPrompts?: {label: string; accent?: string}[];
   conversationId: string;
@@ -347,7 +396,7 @@ export type ChatInterfaceProps = {
 
 export function ChatInterface({
   className,
-  viewContext,
+  messageContext,
   placeholder,
   defaultPrompts,
   conversationId,
@@ -364,7 +413,7 @@ export function ChatInterface({
     loading,
     loadingHistory,
     prompts,
-  } = useDatabaseChat({viewContext, defaultPrompts, conversationId});
+  } = useDatabaseChat({messageContext, defaultPrompts, conversationId});
 
   const containerRef = React.useRef<HTMLDivElement>(null);
   const scrollRef = React.useRef<HTMLDivElement>(null);
@@ -571,10 +620,10 @@ export function ChatInterface({
       </div>
 
       <div className="border-t border-slate-200 bg-white px-6 py-4">
-        {viewContext ? (
+        {messageContext ? (
           <div className="mb-2 flex w-6/12">
             <div className="truncate rounded-full border border-[dodgerblue] bg-[dodgerblue]/10 px-2 text-xs">
-              {viewContext}
+              {messageContext}
             </div>
           </div>
         ) : null}

package/registry/components/ChatProvider.tsx

@@ -38,7 +38,7 @@ export type ChatMessage = {
 export type SendMessageInput = {
   message: string;
   conversationId: string;
-  context?: string;
+  messageContext?: string;
 };
 
 export type SendMessageResult = {

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/hooks/use-database-chat.ts

@@ -5,12 +5,12 @@ import {useChatAdapter, type ChatMessage, type ChatStreamEvent} from "../compone
 
 export type UseDatabaseChatOptions = {
   conversationId: string;
-  viewContext?: string;
+  messageContext?: string;
   defaultPrompts?: {label: string; accent?: string}[];
 };
 
 export function useDatabaseChat(options: UseDatabaseChatOptions) {
-  const {conversationId: initialConversationId, viewContext, defaultPrompts} = options;
+  const {conversationId: initialConversationId, messageContext, defaultPrompts} = options;
   const adapter = useChatAdapter();
 
   const [conversationId] = React.useState<string>(initialConversationId);
@@ -74,7 +74,6 @@ export function useDatabaseChat(options: UseDatabaseChatOptions) {
         return;
       }
 
-      const withContext = `${viewContext ?? ""} ${outgoing}`.trim();
       addMessage({role: "user", content: outgoing, createdAt: new Date()});
       setMessage("");
 
@@ -93,9 +92,9 @@ export function useDatabaseChat(options: UseDatabaseChatOptions) {
 
           const stream =
             (await adapter.sendMessageStream({
-              message: withContext,
+              message: outgoing,
               conversationId,
-              context: viewContext,
+              messageContext,
             })) as AsyncIterable<ChatStreamEvent>;
 
           for await (const event of stream) {
@@ -135,9 +134,9 @@ export function useDatabaseChat(options: UseDatabaseChatOptions) {
           }
         } else {
           const result = await adapter.sendMessage({
-            message: withContext,
+            message: outgoing,
             conversationId,
-            context: viewContext,
+            messageContext,
           });
           addMessage(result.message);
         }
@@ -145,7 +144,7 @@ export function useDatabaseChat(options: UseDatabaseChatOptions) {
         setLoading(false);
       }
     },
-    [adapter, addMessage, conversationId, message, viewContext]
+    [adapter, addMessage, conversationId, message, messageContext]
   );
 
   return {

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"