telygent-ui 0.1.13 → 0.1.14

package/package.json

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

package/registry/components/ChatInterface.tsx

@@ -344,14 +344,51 @@ const AssistantMessageBody = React.memo(function AssistantMessageBody({
   item: ChatMessage;
   isLatestMessage: boolean;
 }) {
+  if (item.status === "thinking" || item.status === "tool_use") {
+    return (
+      <div className="mdx text-sm text-slate-700 max-w-none flex flex-col gap-2">
+        <p className="flex items-start gap-2 text-slate-500 leading-relaxed">
+          <span className="mt-0.5 h-3 w-3 flex-shrink-0 animate-pulse rounded-full bg-slate-400" />
+          <span>{item.content || "Thinking…"}</span>
+        </p>
+        {item.toolHistory && item.toolHistory.length > 0 && (
+          <div className="flex flex-col gap-1.5 pl-1">
+            {item.toolHistory.length > 3 && (
+              <p className="flex items-center gap-2 text-xs text-slate-400">
+                <Check className="h-3 w-3 flex-shrink-0 text-emerald-500" />
+                <span>{item.toolHistory.length - 3} tools completed</span>
+              </p>
+            )}
+            {item.toolHistory.slice(-3).map((entry, i, slice) => {
+              const isActive = i === slice.length - 1 && item.status === "tool_use";
+              return (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  {isActive ? (
+                    <span className="h-3 w-3 flex-shrink-0 animate-spin rounded-full border border-slate-300 border-t-slate-600" />
+                  ) : (
+                    <Check className="h-3 w-3 flex-shrink-0 text-emerald-500" />
+                  )}
+                  <span className={cn(isActive ? "text-slate-600" : "text-slate-400 line-through")}>
+                    {entry.toolContext}
+                  </span>
+                  <div className="flex gap-1">
+                    {entry.toolNames.map((name) => (
+                      <span key={name} className={cn("rounded px-1 py-0.5 font-mono text-[10px]", isActive ? "bg-slate-100 text-slate-500" : "bg-slate-50 text-slate-400")}>
+                        {name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   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(
@@ -550,7 +587,7 @@ export function ChatInterface({
       return false;
     }
     const latest = timeline[timeline.length - 1];
-    return latest.role === "assistant" && latest.status === "thinking";
+    return latest.role === "assistant" && (latest.status === "thinking" || latest.status === "tool_use");
   }, [timeline]);
 
   return (

package/registry/components/ChatProvider.tsx

@@ -27,10 +27,12 @@ export type ChatMessage = {
   createdAt?: Date;
   visualizations?: ChatVisualization[];
   summaryCards?: ChatSummaryCard[];
-  phase?: "thinking" | "final" | "error";
+  phase?: "thinking" | "tool_use" | "final" | "error";
   status?: string;
   meta?: Record<string, unknown>;
   toolCalls?: unknown[];
+  currentTool?: string;
+  toolHistory?: {toolNames: string[]; toolContext: string}[];
   softCap?: number;
   hardCap?: number;
 };
@@ -47,13 +49,15 @@ export type SendMessageResult = {
 };
 
 export type ChatStreamEvent = {
-  phase: "thinking" | "final" | "error";
+  phase: "thinking" | "tool_use" | "final" | "error";
   status: string;
   content?: string;
   conversationId?: string;
   visualizations?: ChatVisualization[];
   summaryCards?: ChatSummaryCard[];
   meta?: Record<string, unknown>;
+  toolNames?: string[];
+  toolContext?: string;
   tool_calls?: unknown[];
   softCap?: number;
   hardCap?: number;

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

@@ -108,6 +108,25 @@ export function useDatabaseChat(options: UseDatabaseChatOptions) {
               continue;
             }
 
+            if (event.status === "tool_use") {
+              const entry = {toolNames: event.toolNames ?? [], toolContext: event.toolContext ?? ""};
+              setTimeline((prev) =>
+                prev.map((msg) =>
+                  msg.id === assistantId
+                    ? {
+                        ...msg,
+                        phase: event.phase,
+                        status: event.status,
+                        meta: event.meta,
+                        currentTool: entry.toolNames[0] ?? "",
+                        toolHistory: [...(msg.toolHistory ?? []), entry],
+                      }
+                    : msg
+                )
+              );
+              continue;
+            }
+
             if (event.status === "final") {
               updateMessage(assistantId, {
                 content: event.content ?? "",