@devpablocristo/modules-ai-console 0.1.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@devpablocristo/modules-ai-console",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --environment jsdom --globals --passWithNoTests"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^26.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.8.0",
+    "vitest": "^3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ]
+}

package/src/CopilotResponsePanel.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+
+export type CopilotRelatedInsightItem = {
+  id: string;
+  title: string;
+  href?: string;
+};
+
+export type CopilotResponsePanelProps = {
+  answer: string;
+  data: unknown;
+  sources: unknown;
+  warnings: unknown;
+  relatedInsightsCount: number;
+  relatedInsights: CopilotRelatedInsightItem[];
+  relatedInsightsTitle?: string;
+  relatedInsightsAction?: ReactNode;
+  emptyRelatedInsightsMessage?: string;
+  renderRelatedInsight?: (item: CopilotRelatedInsightItem) => ReactNode;
+};
+
+function JsonSection({ title, value }: { title: string; value: unknown }) {
+  return (
+    <div className="border rounded-md p-4">
+      <h3 className="font-semibold">{title}</h3>
+      <pre className="text-xs text-slate-700 whitespace-pre-wrap">{JSON.stringify(value, null, 2)}</pre>
+    </div>
+  );
+}
+
+export function CopilotResponsePanel({
+  answer,
+  data,
+  sources,
+  warnings,
+  relatedInsightsCount,
+  relatedInsights,
+  relatedInsightsTitle = "Insights Relacionados",
+  relatedInsightsAction,
+  emptyRelatedInsightsMessage = "No hay insights activos.",
+  renderRelatedInsight,
+}: CopilotResponsePanelProps) {
+  return (
+    <div className="grid grid-cols-1 gap-4">
+      <div className="border rounded-md p-4">
+        <h3 className="font-semibold">Respuesta</h3>
+        <p className="text-sm text-slate-700">{answer}</p>
+      </div>
+      <JsonSection title="Datos" value={data} />
+      <JsonSection title="Fuentes" value={sources} />
+      <JsonSection title="Advertencias" value={warnings} />
+      <div className="border rounded-md p-4">
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold">{relatedInsightsTitle}</h3>
+          {relatedInsightsAction}
+        </div>
+        <div className="mt-2 text-sm text-slate-700">Relacionados: {relatedInsightsCount}</div>
+        {relatedInsights.length === 0 ? (
+          <div className="mt-2 text-sm text-slate-500">{emptyRelatedInsightsMessage}</div>
+        ) : (
+          <div className="mt-3 grid grid-cols-1 gap-2">
+            {relatedInsights.map((item) =>
+              renderRelatedInsight ? (
+                renderRelatedInsight(item)
+              ) : (
+                <a
+                  key={item.id}
+                  className="rounded-md border px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
+                  href={item.href || "#"}
+                >
+                  {item.title}
+                </a>
+              ),
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/InsightCardsList.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+
+export type InsightListItem = {
+  id: string;
+  title: string;
+  summary: string;
+  badge?: string;
+  impact?: string | null;
+  metadata?: string[];
+  ctaLabel?: string | null;
+  action?: ReactNode;
+};
+
+export type InsightCardsListProps = {
+  title: string;
+  items: InsightListItem[];
+  emptyMessage: string;
+  collapsedCount?: number;
+  expanded?: boolean;
+  onToggleExpanded?: () => void;
+  showAllLabel?: string;
+  showLessLabel?: string;
+};
+
+export function InsightCardsList({
+  title,
+  items,
+  emptyMessage,
+  collapsedCount,
+  expanded = false,
+  onToggleExpanded,
+  showAllLabel = "Mostrar todos",
+  showLessLabel = "Mostrar menos",
+}: InsightCardsListProps) {
+  const visibleItems =
+    collapsedCount && !expanded ? items.slice(0, collapsedCount) : items;
+
+  return (
+    <div className="border rounded-md p-4">
+      <h3 className="font-semibold mb-2">{title}</h3>
+      {items.length === 0 ? (
+        <div className="text-sm text-slate-500">{emptyMessage}</div>
+      ) : (
+        <div className="grid grid-cols-1 gap-3">
+          {visibleItems.map((item) => (
+            <div key={item.id} className="rounded-md border p-3">
+              <div className="flex items-center justify-between gap-3">
+                <div className="font-semibold">{item.title}</div>
+                {item.badge ? (
+                  <div className="text-xs text-slate-500">{item.badge}</div>
+                ) : null}
+              </div>
+              <div className="text-sm text-slate-600">{item.summary}</div>
+              {item.ctaLabel ? (
+                <div className="mt-2 text-sm text-slate-700">CTA: {item.ctaLabel}</div>
+              ) : null}
+              {item.impact ? (
+                <div className="mt-2 text-xs text-slate-500">{item.impact}</div>
+              ) : null}
+              {item.metadata?.length ? (
+                <div className="mt-2 flex items-center gap-3 flex-wrap text-xs text-slate-500">
+                  {item.metadata.map((entry) => (
+                    <span key={entry}>{entry}</span>
+                  ))}
+                </div>
+              ) : null}
+              {item.action ? <div className="mt-2">{item.action}</div> : null}
+            </div>
+          ))}
+          {collapsedCount && items.length > collapsedCount && onToggleExpanded ? (
+            <button
+              type="button"
+              className="text-sm text-blue-600 hover:underline"
+              onClick={onToggleExpanded}
+            >
+              {expanded ? showLessLabel : showAllLabel}
+            </button>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/InsightSummaryCards.tsx

@@ -0,0 +1,21 @@
+export type InsightSummaryCard = {
+  label: string;
+  value: string | number;
+};
+
+export type InsightSummaryCardsProps = {
+  cards: InsightSummaryCard[];
+};
+
+export function InsightSummaryCards({ cards }: InsightSummaryCardsProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      {cards.map((card) => (
+        <div key={card.label} className="border rounded-md p-4">
+          <div className="text-sm text-slate-500">{card.label}</div>
+          <div className="text-2xl font-semibold">{card.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { CopilotResponsePanel, type CopilotRelatedInsightItem, type CopilotResponsePanelProps } from "./CopilotResponsePanel";
+export { InsightSummaryCards, type InsightSummaryCard, type InsightSummaryCardsProps } from "./InsightSummaryCards";
+export { InsightCardsList, type InsightListItem, type InsightCardsListProps } from "./InsightCardsList";