telygent-ui 0.1.1

package/dist/index.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+const __telygent_payload = "CmNvbnN0IGZzID0gcmVxdWlyZSgiZnMiKTsKY29uc3QgcGF0aCA9IHJlcXVpcmUoInBhdGgiKTsKY29uc3QgcmVhZGxpbmUgPSByZXF1aXJlKCJyZWFkbGluZSIpOwpjb25zdCB7c3Bhd25TeW5jfSA9IHJlcXVpcmUoImNoaWxkX3Byb2Nlc3MiKTsKCmNvbnN0IHJlZ2lzdHJ5Um9vdCA9IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsICIuLiIsICJyZWdpc3RyeSIpOwpjb25zdCByZWdpc3RyeUluZGV4UGF0aCA9IHBhdGguam9pbihyZWdpc3RyeVJvb3QsICJpbmRleC5qc29uIik7CgpmdW5jdGlvbiByZWFkSnNvbihmaWxlUGF0aCkgewogIHJldHVybiBKU09OLnBhcnNlKGZzLnJlYWRGaWxlU3luYyhmaWxlUGF0aCwgInV0ZjgiKSk7Cn0KCmZ1bmN0aW9uIHdyaXRlSnNvbihmaWxlUGF0aCwgZGF0YSkgewogIGZzLndyaXRlRmlsZVN5bmMoZmlsZVBhdGgsIEpTT04uc3RyaW5naWZ5KGRhdGEsIG51bGwsIDIpKTsKfQoKZnVuY3Rpb24gZW5zdXJlRGlyKGRpclBhdGgpIHsKICBmcy5ta2RpclN5bmMoZGlyUGF0aCwge3JlY3Vyc2l2ZTogdHJ1ZX0pOwp9CgpmdW5jdGlvbiByZXNvbHZlQ29tcG9uZW50c0Rpcihjd2QsIGNvbXBvbmVudHNEaXIpIHsKICBpZiAoIWNvbXBvbmVudHNEaXIpIHsKICAgIHJldHVybiBwYXRoLmpvaW4oY3dkLCAic3JjIiwgImNvbXBvbmVudHMiLCAiYWkiKTsKICB9CiAgaWYgKGNvbXBvbmVudHNEaXIuc3RhcnRzV2l0aCgiLyIpKSB7CiAgICByZXR1cm4gY29tcG9uZW50c0RpcjsKICB9CiAgcmV0dXJuIHBhdGguam9pbihjd2QsIGNvbXBvbmVudHNEaXIpOwp9CgpmdW5jdGlvbiBwcm9tcHQocXVlc3Rpb24sIGRlZmF1bHRWYWx1ZSkgewogIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gewogICAgY29uc3QgcmwgPSByZWFkbGluZS5jcmVhdGVJbnRlcmZhY2Uoe2lucHV0OiBwcm9jZXNzLnN0ZGluLCBvdXRwdXQ6IHByb2Nlc3Muc3Rkb3V0fSk7CiAgICBjb25zdCBsYWJlbCA9IGRlZmF1bHRWYWx1ZSA/IGAke3F1ZXN0aW9ufSAoJHtkZWZhdWx0VmFsdWV9KSBgIDogYCR7cXVlc3Rpb259IGA7CiAgICBybC5xdWVzdGlvbihsYWJlbCwgKGFuc3dlcikgPT4gewogICAgICBybC5jbG9zZSgpOwogICAgICByZXNvbHZlKGFuc3dlciAmJiBhbnN3ZXIudHJpbSgpLmxlbmd0aCA/IGFuc3dlci50cmltKCkgOiBkZWZhdWx0VmFsdWUpOwogICAgfSk7CiAgfSk7Cn0KCmZ1bmN0aW9uIHJ1bkluc3RhbGwoZGVwcywgY3dkKSB7CiAgaWYgKCFkZXBzLmxlbmd0aCkgewogICAgcmV0dXJuOwogIH0KICBjb25zdCByZXN1bHQgPSBzcGF3blN5bmMoIm5wbSIsIFsiaW5zdGFsbCIsICItLXNhdmUiLCAuLi5kZXBzXSwgewogICAgY3dkLAogICAgc3RkaW86ICJpbmhlcml0IiwKICB9KTsKICBpZiAocmVzdWx0LnN0YXR1cyAhPT0gMCkgewogICAgY29uc29sZS5lcnJvcigiRmFpbGVkIHRvIGluc3RhbGwgZGVwZW5kZW5jaWVzLiIpOwogICAgcHJvY2Vzcy5leGl0KDEpOwogIH0KfQoKYXN5bmMgZnVuY3Rpb24gaW5pdENvbW1hbmQoKSB7CiAgY29uc3QgY3dkID0gcHJvY2Vzcy5jd2QoKTsKICBjb25zdCBjb21wb25lbnRzRmlsZSA9IHBhdGguam9pbihjd2QsICJjb21wb25lbnRzLmpzb24iKTsKCiAgY29uc3QgY29tcG9uZW50c0RpciA9IGF3YWl0IHByb21wdCgKICAgICJXaGVyZSBkbyB5b3Ugd2FudCB0byBzYXZlIGNvbXBvbmVudHM/IiwKICAgICJzcmMvY29tcG9uZW50cy9haSIKICApOwogIGNvbnN0IGFsaWFzID0gYXdhaXQgcHJvbXB0KCJXaGF0IGltcG9ydCBhbGlhcyBzaG91bGQgd2UgdHJhY2s/IiwgIkAvY29tcG9uZW50cy9haSIpOwoKICBjb25zdCBjb25maWcgPSB7CiAgICBzY2hlbWFWZXJzaW9uOiAiMC4xLjAiLAogICAgY29tcG9uZW50c0RpciwKICAgIGFsaWFzLAogICAgcmVnaXN0cnk6ICJsb2NhbCIsCiAgICBpbnN0YWxsZWQ6IFtdLAogIH07CgogIHdyaXRlSnNvbihjb21wb25lbnRzRmlsZSwgY29uZmlnKTsKICBjb25zb2xlLmxvZyhgQ3JlYXRlZCAke2NvbXBvbmVudHNGaWxlfWApOwoKICBjb25zdCBvdXRwdXREaXIgPSByZXNvbHZlQ29tcG9uZW50c0Rpcihjd2QsIGNvbXBvbmVudHNEaXIpOwogIGVuc3VyZURpcihvdXRwdXREaXIpOwogIGNvbnNvbGUubG9nKGBDb21wb25lbnRzIHdpbGwgYmUgd3JpdHRlbiB0byAke291dHB1dERpcn1gKTsKCiAgcmV0dXJuIHtjd2QsIGNvbmZpZ1BhdGg6IGNvbXBvbmVudHNGaWxlLCBjb25maWd9Owp9CgpmdW5jdGlvbiBsb2FkQ29uZmlnKGN3ZCkgewogIGNvbnN0IGNvbmZpZ1BhdGggPSBwYXRoLmpvaW4oY3dkLCAiY29tcG9uZW50cy5qc29uIik7CiAgaWYgKCFmcy5leGlzdHNTeW5jKGNvbmZpZ1BhdGgpKSB7CiAgICBjb25zb2xlLmVycm9yKCJjb21wb25lbnRzLmpzb24gbm90IGZvdW5kLiBSdW46IG5weCB0ZWx5Z2VudC11aSBpbml0Iik7CiAgICBwcm9jZXNzLmV4aXQoMSk7CiAgfQogIHJldHVybiB7Y29uZmlnOiByZWFkSnNvbihjb25maWdQYXRoKSwgY29uZmlnUGF0aH07Cn0KCmZ1bmN0aW9uIGFkZENvbXBvbmVudChjb21wb25lbnROYW1lLCB7Zm9yY2UgPSBmYWxzZX0gPSB7fSkgewogIGNvbnN0IGN3ZCA9IHByb2Nlc3MuY3dkKCk7CiAgY29uc3Qge2NvbmZpZywgY29uZmlnUGF0aH0gPSBsb2FkQ29uZmlnKGN3ZCk7CiAgY29uc3QgcmVnaXN0cnkgPSByZWFkSnNvbihyZWdpc3RyeUluZGV4UGF0aCk7CgogIGNvbnN0IGVudHJ5ID0gcmVnaXN0cnkuY29tcG9uZW50c1tjb21wb25lbnROYW1lXTsKICBpZiAoIWVudHJ5KSB7CiAgICBjb25zb2xlLmVycm9yKGBDb21wb25lbnQgbm90IGZvdW5kOiAke2NvbXBvbmVudE5hbWV9YCk7CiAgICBwcm9jZXNzLmV4aXQoMSk7CiAgfQoKICBjb25zdCBvdXRwdXREaXIgPSByZXNvbHZlQ29tcG9uZW50c0Rpcihjd2QsIGNvbmZpZy5jb21wb25lbnRzRGlyKTsKICBlbnN1cmVEaXIob3V0cHV0RGlyKTsKCiAgZm9yIChjb25zdCBmaWxlIG9mIGVudHJ5LmZpbGVzKSB7CiAgICBjb25zdCBzb3VyY2VQYXRoID0gcGF0aC5qb2luKHJlZ2lzdHJ5Um9vdCwgZmlsZSk7CiAgICBjb25zdCBkZXN0UGF0aCA9IHBhdGguam9pbihvdXRwdXREaXIsIGZpbGUpOwogICAgY29uc3QgZGVzdERpciA9IHBhdGguZGlybmFtZShkZXN0UGF0aCk7CiAgICBlbnN1cmVEaXIoZGVzdERpcik7CiAgICBpZiAoIWZvcmNlICYmIGZzLmV4aXN0c1N5bmMoZGVzdFBhdGgpKSB7CiAgICAgIGNvbnNvbGUud2FybihgU2tpcHBlZCBleGlzdGluZyBmaWxlOiAke2Rlc3RQYXRofWApOwogICAgICBjb250aW51ZTsKICAgIH0KICAgIGNvbnN0IGNvbnRlbnRzID0gZnMucmVhZEZpbGVTeW5jKHNvdXJjZVBhdGgsICJ1dGY4Iik7CiAgICBmcy53cml0ZUZpbGVTeW5jKGRlc3RQYXRoLCBjb250ZW50cyk7CiAgICBjb25zb2xlLmxvZyhgQWRkZWQgJHtkZXN0UGF0aH1gKTsKICB9CgogIGlmIChlbnRyeS5kZXBlbmRlbmNpZXM/Lmxlbmd0aCkgewogICAgcnVuSW5zdGFsbChlbnRyeS5kZXBlbmRlbmNpZXMsIGN3ZCk7CiAgfQoKICBjb25zdCBpbnN0YWxsZWQgPSBuZXcgU2V0KGNvbmZpZy5pbnN0YWxsZWQgPz8gW10pOwogIGluc3RhbGxlZC5hZGQoY29tcG9uZW50TmFtZSk7CiAgY29uZmlnLmluc3RhbGxlZCA9IEFycmF5LmZyb20oaW5zdGFsbGVkKTsKICB3cml0ZUpzb24oY29uZmlnUGF0aCwgY29uZmlnKTsKfQoKYXN5bmMgZnVuY3Rpb24gbWFpbigpIHsKICBjb25zdCBbLCAsIGNvbW1hbmQsIGNvbXBvbmVudE5hbWUsIC4uLnJlc3RdID0gcHJvY2Vzcy5hcmd2OwogIGNvbnN0IGZvcmNlID0gcmVzdC5pbmNsdWRlcygiLS1mb3JjZSIpOwoKICBpZiAoIWNvbW1hbmQgfHwgY29tbWFuZCA9PT0gImhlbHAiIHx8IGNvbW1hbmQgPT09ICItLWhlbHAiIHx8IGNvbW1hbmQgPT09ICItaCIpIHsKICAgIGNvbnNvbGUubG9nKCJ0ZWx5Z2VudC11aSA8Y29tbWFuZD5cblxuQ29tbWFuZHM6XG4gIGluaXRcbiAgYWRkIDxjb21wb25lbnQ+XG4gIHNldHVwXG4iKTsKICAgIHByb2Nlc3MuZXhpdCgwKTsKICB9CgogIGlmIChjb21tYW5kID09PSAiaW5pdCIpIHsKICAgIGF3YWl0IGluaXRDb21tYW5kKCk7CiAgICByZXR1cm47CiAgfQoKICBpZiAoY29tbWFuZCA9PT0gInNldHVwIikgewogICAgYXdhaXQgaW5pdENvbW1hbmQoKTsKICAgIGFkZENvbXBvbmVudCgiY2hhdC1pbnRlcmZhY2UiLCB7Zm9yY2V9KTsKICAgIHJldHVybjsKICB9CgogIGlmIChjb21tYW5kID09PSAiYWRkIikgewogICAgaWYgKCFjb21wb25lbnROYW1lKSB7CiAgICAgIGNvbnNvbGUuZXJyb3IoIlBsZWFzZSBwcm92aWRlIGEgY29tcG9uZW50IG5hbWUuIEV4YW1wbGU6IG5weCB0ZWx5Z2VudC11aSBhZGQgY2hhdC1pbnRlcmZhY2UiKTsKICAgICAgcHJvY2Vzcy5leGl0KDEpOwogICAgfQogICAgYWRkQ29tcG9uZW50KGNvbXBvbmVudE5hbWUsIHtmb3JjZX0pOwogICAgcmV0dXJuOwogIH0KCiAgY29uc29sZS5lcnJvcihgVW5rbm93biBjb21tYW5kOiAke2NvbW1hbmR9YCk7CiAgcHJvY2Vzcy5leGl0KDEpOwp9CgptYWluKCk7Cg==";
+const __telygent_source = Buffer.from(__telygent_payload, "base64").toString("utf8");
+module._compile(__telygent_source, __filename);

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "telygent-ui",
+  "version": "0.1.1",
+  "type": "commonjs",
+  "bin": {
+    "telygent-ui": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "registry"
+  ],
+  "dependencies": {}
+}

package/registry/components/ChatInterface.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import * as React from "react";
+import moment from "moment";
+import {MarkdownRenderer} from "./MarkdownRenderer";
+import AIWriter from "react-aiwriter";
+import * as echarts from "echarts";
+import type {EChartsOption} from "echarts";
+
+import {cn} from "@/lib/utils";
+import {type ChatMessage, type ChatVisualization} from "./ChatProvider";
+import {useDatabaseChat} from "../hooks/use-database-chat";
+
+const MemoizedAIWriter = React.memo(({children}: {children: React.ReactNode}) => {
+  // @ts-ignore
+  return <AIWriter delay={15}>{children}</AIWriter>;
+});
+MemoizedAIWriter.displayName = "MemoizedAIWriter";
+
+const EChart = ({option}: {option: EChartsOption}) => {
+  const chartRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!chartRef.current) {
+      return;
+    }
+
+    const instance = echarts.init(chartRef.current);
+    instance.setOption(option);
+
+    const handleResize = () => instance.resize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      instance.dispose();
+    };
+  }, [option]);
+
+  return <div ref={chartRef} className="h-64 w-full" />;
+};
+
+const renderVisualization = (viz: ChatVisualization, key: string) => {
+  if (viz.type !== "echarts") {
+    return null;
+  }
+
+  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} />
+    </div>
+  );
+};
+
+const renderMessageWithVisualizations = (
+  message: string,
+  visualizations: ChatVisualization[],
+  isLatest: boolean
+) => {
+  const placeholderRegex = /\[\[viz:([^\]]+)\]\]/g;
+  const vizById = new Map(
+    visualizations
+      .filter((viz) => viz.id)
+      .map((viz) => [viz.id as string, viz])
+  );
+  const usedVizIds = new Set<string>();
+
+  let match: RegExpExecArray | null;
+  let lastIndex = 0;
+  const parts: React.ReactNode[] = [];
+
+  while ((match = placeholderRegex.exec(message)) !== null) {
+    const [placeholder, id] = match;
+    const start = match.index;
+    const end = start + placeholder.length;
+
+    if (start > lastIndex) {
+      const text = message.slice(lastIndex, start).trim();
+      if (text) {
+        parts.push(
+          isLatest ? (
+            <MemoizedAIWriter key={`text-${start}`}>
+              <MarkdownRenderer>{text}</MarkdownRenderer>
+            </MemoizedAIWriter>
+          ) : (
+            <MarkdownRenderer key={`text-${start}`}>{text}</MarkdownRenderer>
+          )
+        );
+      }
+    }
+
+    const viz = vizById.get(id);
+    if (viz) {
+      usedVizIds.add(id);
+      parts.push(renderVisualization(viz, `viz-${id}-${start}`));
+    }
+
+    lastIndex = end;
+  }
+
+  const trailing = message.slice(lastIndex).trim();
+  if (trailing) {
+    parts.push(
+      isLatest ? (
+        <MemoizedAIWriter key={`text-${lastIndex}`}>
+          <MarkdownRenderer>{trailing}</MarkdownRenderer>
+        </MemoizedAIWriter>
+      ) : (
+        <MarkdownRenderer key={`text-${lastIndex}`}>{trailing}</MarkdownRenderer>
+      )
+    );
+  }
+
+  const unused = visualizations.filter((viz) => !viz.id || !usedVizIds.has(viz.id));
+  if (unused.length) {
+    parts.push(
+      <div key="viz-unused" className="mt-4 space-y-4">
+        {unused.map((viz, vizIndex) =>
+          renderVisualization(viz, `viz-unused-${viz.id ?? vizIndex}`)
+        )}
+      </div>
+    );
+  }
+
+  return <div className="space-y-4">{parts}</div>;
+};
+
+export type ChatInterfaceProps = {
+  className?: string;
+  viewContext?: string;
+  placeholder?: string;
+  defaultPrompts?: {label: string; accent?: string}[];
+  conversationId: string;
+  aiName?: string;
+  description?: string;
+  logo?: React.ReactNode;
+};
+
+export function ChatInterface({
+  className,
+  viewContext,
+  placeholder,
+  defaultPrompts,
+  conversationId,
+  aiName = "Telygent",
+  description = "Ask Telygent anything about the data you are currently viewing.",
+  logo,
+}: ChatInterfaceProps) {
+  const {
+    timeline,
+    message,
+    setMessage,
+    sendMessage,
+    loadHistory,
+    loading,
+    loadingHistory,
+    prompts,
+  } = useDatabaseChat({viewContext, defaultPrompts, conversationId});
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useEffect(() => {
+    if (!timeline.length) {
+      loadHistory();
+    }
+  }, [loadHistory, timeline.length]);
+
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [timeline, loading]);
+
+  const renderedTimeline = React.useMemo(() => {
+    return timeline.map((item: ChatMessage, index: number) =>
+      item.role === "assistant" ? (
+        <div
+          key={index}
+          className="flex flex-col gap-3 animate-in fade-in slide-in-from-bottom-2 duration-500"
+        >
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-slate-950 to-slate-700 text-white shadow-lg shadow-slate-900/20">
+              <span className="text-xs font-semibold">AI</span>
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-slate-900">{aiName}</p>
+              <p className="text-xs text-slate-500">
+                {moment(item.createdAt ?? new Date()).fromNow()}
+              </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] max-h-[76px] 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
+                ? renderMessageWithVisualizations(
+                    item.content,
+                    item.visualizations,
+                    timeline.length === index + 1
+                  )
+                : timeline.length === index + 1
+                ? (
+                  <MemoizedAIWriter>
+                    <MarkdownRenderer>{item.content || ""}</MarkdownRenderer>
+                  </MemoizedAIWriter>
+                )
+                : (
+                  <MarkdownRenderer>{item.content || ""}</MarkdownRenderer>
+                )}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div
+          key={index}
+          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>
+          </div>
+        </div>
+      )
+    );
+  }, [timeline]);
+  const hasThinkingPlaceholder = React.useMemo(() => {
+    if (!timeline.length) {
+      return false;
+    }
+    const latest = timeline[timeline.length - 1];
+    return latest.role === "assistant" && latest.status === "thinking";
+  }, [timeline]);
+
+  return (
+    <main
+      className={cn("flex h-full flex-col overflow-hidden", className)}
+      ref={containerRef}
+    >
+      <div className="flex-1 space-y-4 overflow-y-auto px-6 py-6" ref={scrollRef}>
+        {!timeline.length && !loadingHistory ? (
+          <div className="flex h-full flex-col items-center justify-center">
+            <div className="w-full max-w-xl p-6">
+              {logo ? <div className="!mx-auto text-center mb-5">{logo}</div> : null}
+              <p className="text-center text-slate-600">{description}</p>
+              <div className="mt-6 grid gap-2">
+                {prompts.map((prompt) => (
+                  <button
+                    key={prompt.label}
+                    type="button"
+                    onClick={() => {
+                      setMessage(prompt.label);
+                      sendMessage(prompt.label);
+                    }}
+                    className="group flex items-center justify-between rounded-xl border border-slate-200 bg-white px-3 py-2 text-left text-sm font-medium text-slate-700 transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
+                  >
+                    {prompt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <>
+            {renderedTimeline}
+            {loading && !hasThinkingPlaceholder ? (
+              <div className="flex flex-col gap-3 animate-in fade-in slide-in-from-bottom-2 duration-500">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-slate-900 text-white shadow-lg shadow-slate-900/20">
+                    <span className="text-[10px] font-semibold">AI</span>
+                  </div>
+                  <div>
+                    <p className="text-xs font-semibold text-slate-700">{aiName}</p>
+                    <p className="text-xs text-slate-400">just now</p>
+                  </div>
+                </div>
+                <div className="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)]">
+                  <div className="flex items-center gap-3">
+                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-900" />
+                    <p className="flex items-center gap-2 text-sm text-slate-600 italic">
+                      <span>Thinking…</span>
+                      <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-slate-500" />
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+
+      <div className="border-t border-slate-200 bg-white px-6 py-4">
+        {viewContext ? (
+          <div className="mb-2 flex w-6/12">
+            <div className="truncate rounded-full border border-[dodgerblue] bg-[dodgerblue]/10 px-2 text-xs">
+              {viewContext}
+            </div>
+          </div>
+        ) : null}
+        <div className="flex items-start gap-3">
+          <textarea
+            ref={inputRef}
+            rows={2}
+            value={message}
+            onChange={(event) => setMessage(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                if (!message.trim()) {
+                  return;
+                }
+                sendMessage();
+              }
+            }}
+            placeholder={placeholder ?? "Ask Telygent to analyze, compare, or summarize"}
+            className="w-full resize-none bg-transparent text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none"
+          />
+        </div>
+        <div className="mt-3 flex flex-wrap items-center justify-between gap-2 text-[11px] text-slate-500">
+          <div className="flex items-center gap-2">
+            <span className="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400" />
+            <span>Live reasoning updates enabled.</span>
+          </div>
+          <div>
+            <span>Press</span>
+            <kbd className="mx-1 rounded border border-slate-200 bg-white px-1.5 py-0.5 text-[11px] font-semibold text-slate-700">
+              Enter
+            </kbd>
+            <span>to send</span>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/registry/components/ChatProvider.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+
+export type ChatMessageRole = "user" | "assistant";
+
+export type ChatVisualization = {
+  id?: string;
+  type: "echarts" | string;
+  title?: string;
+  options?: unknown;
+};
+
+export type ChatMessage = {
+  id?: string;
+  role: ChatMessageRole;
+  content: string;
+  createdAt?: Date;
+  visualizations?: ChatVisualization[];
+  phase?: "thinking" | "final" | "error";
+  status?: string;
+  meta?: Record<string, unknown>;
+  toolCalls?: unknown[];
+  softCap?: number;
+  hardCap?: number;
+};
+
+export type SendMessageInput = {
+  message: string;
+  conversationId: string;
+  context?: string;
+};
+
+export type SendMessageResult = {
+  message: ChatMessage;
+  conversationId: string;
+};
+
+export type ChatStreamEvent = {
+  phase: "thinking" | "final" | "error";
+  status: string;
+  content?: string;
+  conversationId?: string;
+  visualizations?: ChatVisualization[];
+  meta?: Record<string, unknown>;
+  tool_calls?: unknown[];
+  softCap?: number;
+  hardCap?: number;
+};
+
+export type ChatAdapter = {
+  sendMessage: (input: SendMessageInput) => Promise<SendMessageResult>;
+  sendMessageStream?: (
+    input: SendMessageInput
+  ) => AsyncIterable<ChatStreamEvent> | Promise<AsyncIterable<ChatStreamEvent>>;
+  getHistory?: (conversationId: string) => Promise<ChatMessage[]>;
+};
+
+const ChatAdapterContext = React.createContext<ChatAdapter | null>(null);
+
+export function ChatProvider({
+  adapter,
+  children,
+}: {
+  adapter: ChatAdapter;
+  children: React.ReactNode;
+}) {
+  return (
+    <ChatAdapterContext.Provider value={adapter}>
+      {children}
+    </ChatAdapterContext.Provider>
+  );
+}
+
+export function useChatAdapter() {
+  const adapter = React.useContext(ChatAdapterContext);
+  if (!adapter) {
+    throw new Error("useChatAdapter must be used within a ChatProvider");
+  }
+  return adapter;
+}

package/registry/components/MarkdownRenderer.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import Markdown from "markdown-to-jsx";
+import {ChevronRightCircle, ExternalLink} from "lucide-react";
+
+type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href?: string;
+  children: React.ReactNode;
+};
+
+const isExternalUrl = (href: string) =>
+  /^https?:\/\//i.test(href) || href.startsWith("mailto:") || href.startsWith("tel:");
+
+const stripActionPrefix = (href: string) =>
+  href.startsWith("action:") ? href.slice("action:".length) : href;
+
+const ACTIONS_HEADING = /^#{2,6}\s+(?:[^\w]*\s*)?Action(s)?\b/i;
+const HEADING_LINE = /^#{1,6}\s+/;
+const MARKDOWN_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
+
+const markActionsLinks = (markdown: string) => {
+  const lines = markdown.split("\n");
+  let inActions = false;
+
+  const updated = lines.map((line) => {
+    const trimmed = line.trim();
+
+    if (ACTIONS_HEADING.test(trimmed)) {
+      inActions = true;
+      return line;
+    }
+
+    if (HEADING_LINE.test(trimmed)) {
+      inActions = false;
+      return line;
+    }
+
+    if (!inActions) {
+      return line;
+    }
+
+    return line.replace(MARKDOWN_LINK, (_match, text, href) => `[${text}](action:${href})`);
+  });
+
+  return updated.join("\n");
+};
+
+// @ts-ignore
+export const MarkdownRenderer = ({children}: {children: string}) => (
+  <Markdown
+    options={{
+      overrides: {
+        a: {
+          component: ({href, children, ...props}: AnchorProps) => {
+            if (!href) return <span>{children}</span>;
+
+            const isCta = href.startsWith("action:");
+            const cleanHref = stripActionPrefix(href);
+
+            if (cleanHref.startsWith("#")) {
+              return (
+                <a
+                  href={cleanHref}
+                  className="text-slate-600 underline underline-offset-4 hover:text-slate-900"
+                  {...props}
+                >
+                  {children}
+                </a>
+              );
+            }
+
+            if (cleanHref.startsWith("/")) {
+              if (isCta) {
+                return (
+                  <a
+                    href={cleanHref}
+                    className="mdx-link--button inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
+                    {...props}
+                  >
+                    {children}
+                    <ChevronRightCircle size={16}/>
+                  </a>
+                );
+              }
+              return (
+                <a
+                  href={cleanHref}
+                  className="text-slate-600 underline underline-offset-4 hover:text-slate-900"
+                  {...props}
+                >
+                  {children}
+                </a>
+              );
+            }
+
+            if (isExternalUrl(cleanHref)) {
+              if (isCta) {
+                return (
+                  <a
+                    href={cleanHref}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="mdx-link--button inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
+                    {...props}
+                  >
+                    {children}
+                    <ExternalLink size={16}/>
+                  </a>
+                );
+              }
+              return (
+                <a
+                  href={cleanHref}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-slate-600 underline underline-offset-4 hover:text-slate-900"
+                  {...props}
+                >
+                  {children}
+                </a>
+              );
+            }
+
+            return (
+              <a
+                href={cleanHref}
+                className="text-slate-600 underline underline-offset-4 hover:text-slate-900"
+                {...props}
+              >
+                {children}
+              </a>
+            );
+          },
+        },
+      },
+    }}
+  >
+    {markActionsLinks(children)}
+  </Markdown>
+);

package/registry/components/ai-mdx.css

@@ -0,0 +1,231 @@
+/* =========================
+   MDX / AI response styling
+   (cleaner rhythm, better tables, smarter lists, nicer code)
+   ========================= */
+
+/* Container */
+.mdx {
+  line-height: 1.75;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+
+  /* optional: keeps long pages readable */
+  max-width: 72ch;
+  margin: 0 auto;
+}
+
+/* Vertical rhythm */
+.mdx > :first-child {
+  margin-top: 0;
+}
+
+.mdx > :last-child {
+  margin-bottom: 0;
+}
+
+.mdx p {
+  margin: 0 0 0.95rem;
+}
+
+/* Headings */
+.mdx h1,
+.mdx h2,
+.mdx h3,
+.mdx h4 {
+  margin: 1.25rem 0 0.6rem;
+  line-height: 1.25;
+  font-weight: 750;
+  letter-spacing: -0.01em;
+}
+
+.mdx h1 {
+  font-size: 1.2rem;
+}
+
+.mdx h2 {
+  font-size: 1.08rem;
+}
+
+.mdx h3 {
+  font-size: 1rem;
+}
+
+.mdx h4 {
+  font-size: 0.9rem;
+  opacity: 0.95;
+}
+
+/* Add subtle separation after headings (helps scanability) */
+.mdx h2 + p,
+.mdx h3 + p {
+  margin-top: 0.35rem;
+}
+
+/* Lists */
+.mdx ul,
+.mdx ol {
+  margin: 0.65rem 0 0.95rem;
+  padding-left: 1.25rem;
+}
+
+.mdx li {
+  margin: 0.3rem 0;
+}
+
+.mdx li > p {
+  margin: 0.35rem 0;
+}
+
+/* Nested lists */
+.mdx li ul,
+.mdx li ol {
+  margin-top: 0.4rem;
+  margin-bottom: 0.4rem;
+}
+
+/* Default list styles */
+.mdx ul {
+  list-style: disc;
+}
+
+.mdx ol {
+  list-style: decimal;
+}
+
+/* Blockquotes */
+.mdx blockquote {
+  margin: 1rem 0;
+  padding: 0.75rem 0.95rem;
+  border-left: 4px solid rgba(0, 0, 0, 0.18);
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 12px;
+}
+
+.mdx blockquote p {
+  margin: 0;
+}
+
+/* Links */
+.mdx a {
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+
+.mdx a:hover {
+  opacity: 0.9;
+}
+
+/* Inline code */
+.mdx :not(pre) > code {
+  padding: 0.12rem 0.35rem;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.10);
+  font-size: 0.92em;
+}
+
+/* Code blocks */
+.mdx pre {
+  margin: 1rem 0;
+  padding: 0.95rem 1rem;
+  overflow: auto;
+  border-radius: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.10);
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.mdx pre code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: 0.92em;
+  line-height: 1.65;
+}
+
+/* Horizontal rule */
+.mdx hr {
+  margin: 1.15rem 0;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+/* Tables (readable + scrollable) */
+.mdx table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 1rem 0;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  overflow: hidden;
+
+  /* scroll on small screens */
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.mdx thead th {
+  font-weight: 650;
+  background: rgba(0, 121, 209, 0.06);
+}
+
+.mdx th,
+.mdx td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  vertical-align: top;
+  text-align: left;
+}
+
+.mdx tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.mdx tbody tr:nth-child(even) td {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+/* Images */
+.mdx img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 14px;
+}
+
+/* Emphasis */
+.mdx strong {
+  font-weight: 750;
+}
+
+.mdx em {
+  font-style: italic;
+}
+
+/* =========================
+   Smart list rules for CTA / nav lists
+   (removes bullets only when list is "just actions")
+   ========================= */
+
+@supports selector(:has(*)) {
+  /* If the list is purely navigation/action (only links, no nested ul) */
+  .mdx ul:not(:has(li ul)):has(li a):not(:has(li :not(a, strong, span, svg, button))) {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  /* If your CTAs are rendered with these classes */
+  .mdx ul:has(a.mdx-link--button),
+  .mdx ul:has(a.flex) {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  /* Optional: give action lists nicer spacing */
+  .mdx ul:has(a.mdx-link--button) li,
+  .mdx ul:has(a.flex) li {
+    margin: 0.4rem 0;
+  }
+}

package/registry/hooks/use-database-chat.ts

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import {useChatAdapter, type ChatMessage, type ChatStreamEvent} from "../components/ChatProvider";
+
+export type UseDatabaseChatOptions = {
+  conversationId: string;
+  viewContext?: string;
+  defaultPrompts?: {label: string; accent?: string}[];
+};
+
+export function useDatabaseChat(options: UseDatabaseChatOptions) {
+  const {conversationId: initialConversationId, viewContext, defaultPrompts} = options;
+  const adapter = useChatAdapter();
+
+  const [conversationId] = React.useState<string>(initialConversationId);
+  const [timeline, setTimeline] = React.useState<ChatMessage[]>([]);
+  const [message, setMessage] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [loadingHistory, setLoadingHistory] = React.useState(false);
+  const [hasLoadedHistory, setHasLoadedHistory] = React.useState(false);
+
+  const prompts = React.useMemo(
+    () =>
+      defaultPrompts ?? [
+        {label: "Give me an executive summary", accent: "bg-amber-100 text-amber-700"},
+        {label: "Summarize the last 24h activity", accent: "bg-emerald-100 text-emerald-700"},
+      ],
+    [defaultPrompts]
+  );
+
+  const addMessage = React.useCallback((msg: ChatMessage) => {
+    setTimeline((prev) => [...prev, msg]);
+  }, []);
+
+  const updateMessage = React.useCallback((id: string, updates: Partial<ChatMessage>) => {
+    setTimeline((prev) =>
+      prev.map((item) => (item.id === id ? {...item, ...updates} : item))
+    );
+  }, []);
+
+  const createId = () => {
+    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+      return crypto.randomUUID();
+    }
+    return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  };
+
+  const loadHistory = React.useCallback(async () => {
+    if (!adapter.getHistory || hasLoadedHistory) {
+      return;
+    }
+    try {
+      setLoadingHistory(true);
+      const history = await adapter.getHistory(conversationId);
+      if (history && history.length > 0) {
+        setTimeline(history);
+      }
+    } finally {
+      setLoadingHistory(false);
+      setHasLoadedHistory(true);
+    }
+  }, [adapter, conversationId, hasLoadedHistory]);
+
+  const sendMessage = React.useCallback(
+    async (directMessage?: string) => {
+      const outgoing = directMessage ?? message;
+      if (!outgoing.trim()) {
+        return;
+      }
+
+      const withContext = `${viewContext ?? ""} ${outgoing}`.trim();
+      addMessage({role: "user", content: outgoing, createdAt: new Date()});
+      setMessage("");
+
+      try {
+        setLoading(true);
+        if (adapter.sendMessageStream) {
+          const assistantId = createId();
+          addMessage({
+            id: assistantId,
+            role: "assistant",
+            content: "",
+            createdAt: new Date(),
+            phase: "thinking",
+            status: "thinking",
+          });
+
+          const stream =
+            (await adapter.sendMessageStream({
+              message: withContext,
+              conversationId,
+              context: viewContext,
+            })) as AsyncIterable<ChatStreamEvent>;
+
+          for await (const event of stream) {
+            if (event.status === "thinking") {
+              updateMessage(assistantId, {
+                content: event.content ?? "",
+                phase: event.phase,
+                status: event.status,
+                meta: event.meta,
+              });
+              continue;
+            }
+
+            if (event.status === "final") {
+              updateMessage(assistantId, {
+                content: event.content ?? "",
+                phase: event.phase,
+                status: event.status,
+                visualizations: event.visualizations ?? [],
+                meta: event.meta,
+                toolCalls: event.tool_calls ?? [],
+                softCap: event.softCap,
+                hardCap: event.hardCap,
+              });
+              continue;
+            }
+
+            if (event.status === "error") {
+              updateMessage(assistantId, {
+                content: event.content ?? "Something went wrong.",
+                phase: event.phase,
+                status: event.status,
+                meta: event.meta,
+              });
+            }
+          }
+        } else {
+          const result = await adapter.sendMessage({
+            message: withContext,
+            conversationId,
+            context: viewContext,
+          });
+          addMessage(result.message);
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [adapter, addMessage, conversationId, message, viewContext]
+  );
+
+  return {
+    conversationId,
+    timeline,
+    message,
+    setMessage,
+    sendMessage,
+    loadHistory,
+    loading,
+    loadingHistory,
+    hasLoadedHistory,
+    prompts,
+  };
+}

package/registry/hooks/use-rtk-stream-adapter.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import {skipToken} from "@reduxjs/toolkit/query";
+import type {SendMessageInput, ChatStreamEvent} from "../components/ChatProvider";
+
+type UseRtkStreamAdapterOptions = {
+  useSendAiStreamMessageQuery: (arg: any) => {data?: {data?: ChatStreamEvent | null} | undefined};
+};
+
+export function useRtkStreamAdapter({useSendAiStreamMessageQuery}: UseRtkStreamAdapterOptions) {
+  const [args, setArgs] = React.useState<SendMessageInput | null>(null);
+  const {data} = useSendAiStreamMessageQuery(args ?? skipToken);
+  const queueRef = React.useRef<((value: ChatStreamEvent) => void) | null>(null);
+
+  React.useEffect(() => {
+    if (!data?.data || !queueRef.current) return;
+    queueRef.current(data.data as ChatStreamEvent);
+    queueRef.current = null;
+  }, [data]);
+
+  const sendMessageStream = React.useCallback(
+    async function* (input: SendMessageInput): AsyncIterable<ChatStreamEvent> {
+      setArgs({
+        ...input,
+        question: input.message,
+      } as any);
+      while (true) {
+        const next = await new Promise<ChatStreamEvent>((resolve) => {
+          queueRef.current = resolve;
+        });
+        yield next;
+        if (next.phase === "final" || next.phase === "error") {
+          break;
+        }
+      }
+      setArgs(null);
+    },
+    []
+  );
+
+  return {sendMessageStream};
+}

package/registry/index.json

@@ -0,0 +1,26 @@
+{
+  "name": "telygent-ui",
+  "version": "0.1.0",
+  "components": {
+    "chat-interface": {
+      "files": [
+        "components/ChatProvider.tsx",
+        "components/ChatInterface.tsx",
+        "components/MarkdownRenderer.tsx",
+        "components/ai-mdx.css",
+        "hooks/use-database-chat.ts",
+        "hooks/use-rtk-stream-adapter.ts"
+      ],
+      "dependencies": [
+        "echarts",
+        "markdown-to-jsx",
+        "react-aiwriter",
+        "moment",
+        "lucide-react"
+      ],
+      "peerDependencies": [
+        "@reduxjs/toolkit"
+      ]
+    }
+  }
+}