mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
GeneralJerel
01f5dbd1ee
Northstar AI CRM — a full-featured agentic sales CRM for an enterprise hardware seller, built with CopilotKit, the AG-UI protocol, and a TypeScript Strands agent (@strands-agents/sdk + @ag-ui/aws-strands). The first TypeScript Strands example under examples/. Highlights: - Agentic canvas: tool calls render on the workspace — quote approval opens a quote page; analyze_team and generate_weekly_report open dedicated report pages; frontend tools navigate the workspace. - Generative UI cards, human-in-the-loop follow-up approval, and a live STATE_SNAPSHOT that syncs a SQLite CRM store with the board, dashboard, and report pages. - Dashboard, pipeline (Kanban), products, team, and reports surfaces. Self-contained under examples/showcases/strands-crm with an agent/ + frontend/ split and a concurrently dev script; listed in examples/README.md.
70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowUpRight, Loader2 } from "lucide-react";
|
|
|
|
/**
|
|
* Slim in-chat acknowledgment for tools whose output renders on the workspace.
|
|
* While the tool runs it shows a one-line "working…" state; on completion it
|
|
* fires `onShow` exactly once (to auto-navigate the workspace) and renders a
|
|
* compact card with a "View" button that re-opens the page.
|
|
*/
|
|
export function WorkspaceHandoffCard({
|
|
title,
|
|
subtitle,
|
|
status,
|
|
pendingLabel = "Working…",
|
|
viewLabel = "View",
|
|
onShow,
|
|
onView,
|
|
}: {
|
|
title: string;
|
|
subtitle?: string;
|
|
status: string;
|
|
pendingLabel?: string;
|
|
viewLabel?: string;
|
|
onShow?: () => void;
|
|
onView?: () => void;
|
|
}) {
|
|
const shown = useRef(false);
|
|
useEffect(() => {
|
|
if (status === "complete" && !shown.current) {
|
|
shown.current = true;
|
|
onShow?.();
|
|
}
|
|
}, [status, onShow]);
|
|
|
|
if (status !== "complete") {
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-xl border border-border bg-card px-3 py-2 text-sm text-muted-foreground">
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
|
|
{pendingLabel}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card px-3 py-2 text-sm shadow-sm">
|
|
<div className="min-w-0">
|
|
<div className="font-medium text-foreground">{title}</div>
|
|
{subtitle && (
|
|
<div className="truncate text-xs text-muted-foreground">
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{onView && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="shrink-0 gap-1"
|
|
onClick={onView}
|
|
>
|
|
{viewLabel}
|
|
<ArrowUpRight className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|