From 18ac8d17097063c87d07939144a18e25ab45d4a9 Mon Sep 17 00:00:00 2001 From: Harsh Mathur Date: Mon, 16 Feb 2026 00:46:40 +0530 Subject: [PATCH] chore: fix build errors --- apps/playground/src/app/page-redesigned.tsx | 405 +++++++++++++++++- .../src/components/ThemeCustomizer.tsx | 12 +- .../src/components/ai-demo-zero-tokens.tsx | 16 +- .../src/components/hero-animation.tsx | 1 - .../src/components/pattern-gallery.tsx | 1 - .../src/components/pattern-sidebar.tsx | 1 - .../src/components/schema-viewer.tsx | 2 +- .../src/components/ui/code-block.tsx | 4 +- patterns/agent-form/component.tsx | 4 +- patterns/chart/example.tsx | 1 + patterns/chat-message/component.tsx | 2 +- patterns/chat-message/example.tsx | 1 + vercel.json | 13 +- 13 files changed, 434 insertions(+), 29 deletions(-) diff --git a/apps/playground/src/app/page-redesigned.tsx b/apps/playground/src/app/page-redesigned.tsx index ec6280f..d13b5c2 100644 --- a/apps/playground/src/app/page-redesigned.tsx +++ b/apps/playground/src/app/page-redesigned.tsx @@ -19,7 +19,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CodeBlock } from "@/components/ui/code-block" import { Button } from "@/components/ui/button" import { Select } from "@/components/ui/select" -import { Badge } from "@/components/ui/badge" import { ToastProvider, useToast } from "@/components/ui/toast" const patterns = [ @@ -43,7 +42,7 @@ function PlaygroundContent() { const [selectedTheme, setSelectedTheme] = useState("default") const [installMethod, setInstallMethod] = useState<"cli" | "manual">("cli") const [packageManager, setPackageManager] = useState<"pnpm" | "npm" | "yarn" | "bun">("pnpm") - const [searchQuery, setSearchQuery] = useState("") + const [searchQuery, _setSearchQuery] = useState("") const [activeTab, setActiveTab] = useState("preview") useEffect(() => { @@ -66,6 +65,156 @@ function PlaygroundContent() { showToast(`Copied ${type} to clipboard!`, "success") } + const renderPattern = () => { + switch (selectedPattern) { + case "metric-card": + return ( +
+ + + +
+ ) + case "data-table": { + const columns: Column<{ name: string; email: string; role: string }>[] = [ + { key: "name", header: "Name" }, + { key: "email", header: "Email" }, + { key: "role", header: "Role" }, + ] + const data = [ + { name: "John Doe", email: "john@example.com", role: "Admin" }, + { name: "Jane Smith", email: "jane@example.com", role: "User" }, + { name: "Bob Johnson", email: "bob@example.com", role: "User" }, + ] + return + } + case "chart": + return ( +
+ + +
+ ) + case "agent-form": + return ( + { + console.log("Form submitted:", data) + alert("Form submitted! Check console.") + }} + /> + ) + case "streaming-indicator": + return ( +
+ + + +
+ ) + case "insights-list": + return ( + + ) + case "detail-card": + return ( + + ) + default: + return null + } + } + const getInstallCommand = (): string => { const patternName = selectedPattern if (installMethod === "cli") { @@ -80,7 +229,255 @@ function PlaygroundContent() { return `# Copy files from patterns/${patternName}/ to your app/patterns/${patternName}/` } - // ... (keep all the renderPattern, getCodePreview, getCopilotKitExample, getSchemaPreview functions from original) + const getCodePreview = () => { + switch (selectedPattern) { + case "metric-card": + return `import { MetricCard } from "@/patterns/metric-card/component" + +` + case "data-table": + return `import { DataTable } from "@/patterns/data-table/component" +import type { Column } from "@/patterns/data-table/component" + +const columns: Column<{ name: string; email: string; role: string }>[] = [ + { key: "name", header: "Name" }, + { key: "email", header: "Email" }, + { key: "role", header: "Role" } +] + +const data = [ + { name: "John Doe", email: "john@example.com", role: "Admin" }, + { name: "Jane Smith", email: "jane@example.com", role: "User" } +] + +` + case "chart": + return `import { Chart } from "@/patterns/chart/component" + +` + case "agent-form": + return `import { AgentForm } from "@/patterns/agent-form/component" + + console.log(data)} +/>` + case "streaming-indicator": + return `import { StreamingIndicator } from "@/patterns/streaming-indicator/component" + + + +// Variants: "dots" | "pulse" | "spinner"` + case "insights-list": + return `import { InsightsList } from "@/patterns/insights-list/component" + + + +// Types: "info" | "warning" | "success" | "error"` + case "detail-card": + return `import { DetailCard } from "@/patterns/detail-card/component" + +` + default: + return "// Select a pattern to see code" + } + } + + const getCopilotKitExample = () => { + const patternName = selectedPattern + const componentName = patternName + .split("-") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join("") + const schemaName = patternName.replace(/-/g, "") + "Schema" + const toolName = "render_" + patternName.replace(/-/g, "_") + + return `import { useRenderToolCall } from "@copilotkit/react-core" +import { ${componentName} } from "@/patterns/${patternName}/component" +import { ${schemaName} } from "@/patterns/${patternName}/schema" + +export function ${componentName}Integration() { + useRenderToolCall({ + toolName: "${toolName}", + argumentsSchema: ${schemaName}, + render: (props) => <${componentName} {...props} /> + }) + + return null +} + +// Your agent can now call "${toolName}" and render ${componentName} components dynamically!` + } + + const getSchemaPreview = () => { + // Schema previews for each pattern + const schemas: Record = { + "metric-card": `import { z } from "zod" + +export const metricCardSchema = z.object({ + label: z.string().describe("Display label for the metric"), + value: z.union([z.string(), z.number()]).describe("The metric value to display"), + trend: z.object({ + value: z.number().describe("Percentage change value"), + label: z.string().describe("Trend description (e.g., 'vs last month')"), + direction: z.enum(["up", "down", "neutral"]) + .describe("Trend direction: 'up' for positive, 'down' for negative"), + }).optional().describe("Optional trend information"), + icon: z.any().optional().describe("Optional React icon component"), + className: z.string().optional().describe("Additional CSS classes"), +})`, + "data-table": `import { z } from "zod" + +export const dataTableSchema = z.object({ + columns: z.array(z.object({ + key: z.string().describe("Column key (matches data object keys)"), + header: z.string().describe("Column header text"), + sortable: z.boolean().optional().describe("Whether column is sortable"), + })).describe("Array of column definitions"), + data: z.array(z.record(z.any())).describe("Array of row data objects"), + className: z.string().optional().describe("Additional CSS classes"), +})`, + "chart": `import { z } from "zod" + +export const chartSchema = z.object({ + title: z.string().optional().describe("Chart title"), + data: z.array(z.object({ + label: z.string().describe("Data point label"), + value: z.number().describe("Numeric value for the data point"), + color: z.string().optional().describe("Optional color"), + })).describe("Array of data points"), + type: z.enum(["bar", "line", "pie"]).default("bar") + .describe("Chart type: 'bar', 'line', or 'pie'"), + showLegend: z.boolean().default(true) + .describe("Whether to show the legend"), + className: z.string().optional(), +})`, + "agent-form": `import { z } from "zod" + +export const agentFormSchema = z.object({ + title: z.string().optional().describe("Form title"), + description: z.string().optional().describe("Form description"), + fields: z.array(z.object({ + name: z.string().describe("Field name (used as key)"), + label: z.string().describe("Display label"), + type: z.enum(["text", "email", "number", "textarea", "select", "checkbox"]) + .describe("Input field type"), + placeholder: z.string().optional(), + required: z.boolean().optional(), + options: z.array(z.object({ + label: z.string(), + value: z.string(), + })).optional().describe("Options for select fields"), + })).describe("Array of form field definitions"), + onSubmit: z.function().optional(), + submitLabel: z.string().default("Submit"), + className: z.string().optional(), +})`, + "streaming-indicator": `import { z } from "zod" + +export const streamingIndicatorSchema = z.object({ + message: z.string().describe("Status message to display"), + variant: z.enum(["dots", "pulse", "spinner"]).default("dots") + .describe("Animation variant: 'dots', 'pulse', or 'spinner'"), + className: z.string().optional(), +})`, + "insights-list": `import { z } from "zod" + +export const insightsListSchema = z.object({ + title: z.string().optional().describe("List title"), + insights: z.array(z.object({ + id: z.string().describe("Unique identifier"), + title: z.string().describe("Insight title"), + description: z.string().describe("Insight description"), + type: z.enum(["info", "warning", "success", "error"]) + .describe("Insight type for styling"), + icon: z.any().optional().describe("Optional icon component"), + })).describe("Array of insights to display"), + className: z.string().optional(), +})`, + "detail-card": `import { z } from "zod" + +export const detailCardSchema = z.object({ + title: z.string().describe("Card title"), + description: z.string().optional().describe("Card description"), + fields: z.array(z.object({ + label: z.string().describe("Field label"), + value: z.union([z.string(), z.number()]).describe("Field value"), + span: z.number().optional().describe("Column span (1-2)"), + })).describe("Array of field definitions"), + className: z.string().optional(), +})`, + } + return schemas[selectedPattern] || `// See patterns/${selectedPattern}/schema.ts for full schema` + } return (
@@ -162,7 +559,7 @@ function PlaygroundContent() { -
{/* renderPattern() */}
+
{renderPattern()}
 diff --git a/apps/playground/src/components/ThemeCustomizer.tsx b/apps/playground/src/components/ThemeCustomizer.tsx index d5e628c..68c7bd1 100644 --- a/apps/playground/src/components/ThemeCustomizer.tsx +++ b/apps/playground/src/components/ThemeCustomizer.tsx @@ -15,7 +15,7 @@ export function ThemeCustomizer({ onCustomThemeChange, }: ThemeCustomizerProps) { const [isOpen, setIsOpen] = useState(false) - const [customTheme, setCustomTheme] = useState(themes[selectedTheme].css) + const [customTheme, setCustomTheme] = useState>(themes[selectedTheme].css as Record) const [showCode, setShowCode] = useState(false) const handleColorChange = (key: string, value: string) => { @@ -32,9 +32,9 @@ export function ThemeCustomizer({ const resetToTheme = (themeName: ThemeName) => { const theme = themes[themeName] - setCustomTheme(theme.css) + setCustomTheme(theme.css as Record) onThemeChange(themeName) - onCustomThemeChange(theme.css) + onCustomThemeChange(theme.css as Record) } const generateCSS = () => { @@ -56,9 +56,9 @@ ${Object.entries(customTheme) const parts = hsl.split(" ") if (parts.length < 3) return "#000000" - const h = parseFloat(parts[0]) || 0 - const s = parseFloat(parts[1]) || 0 - const l = parseFloat(parts[2]) || 0 + const h = parseFloat(parts[0] || "0") || 0 + const s = parseFloat(parts[1] || "0") || 0 + const l = parseFloat(parts[2] || "0") || 0 // Convert HSL to RGB for preview const hNorm = h / 360 diff --git a/apps/playground/src/components/ai-demo-zero-tokens.tsx b/apps/playground/src/components/ai-demo-zero-tokens.tsx index 21d8740..4b48411 100644 --- a/apps/playground/src/components/ai-demo-zero-tokens.tsx +++ b/apps/playground/src/components/ai-demo-zero-tokens.tsx @@ -38,12 +38,12 @@ const scenarios: Scenario[] = [ ] export function AIDemoZeroTokens() { - const [selectedScenario, setSelectedScenario] = useState(scenarios[0].id) + const [selectedScenario, setSelectedScenario] = useState(scenarios[0]?.id || "customer-details") const [stage, setStage] = useState(0) const [promptText, setPromptText] = useState("") const [showByokInput, setShowByokInput] = useState(false) - const scenario = scenarios.find(s => s.id === selectedScenario)! + const scenario = scenarios.find(s => s.id === selectedScenario) || scenarios[0] useEffect(() => { // Reset when scenario changes @@ -53,15 +53,15 @@ export function AIDemoZeroTokens() { useEffect(() => { // Typewriter effect - if (stage === 0 && promptText.length < scenario.prompt.length) { + if (scenario && stage === 0 && promptText.length < scenario.prompt.length) { const timer = setTimeout(() => { setPromptText(scenario.prompt.slice(0, promptText.length + 1)) }, 30) return () => clearTimeout(timer) - } else if (stage === 0 && promptText.length === scenario.prompt.length) { + } else if (scenario && stage === 0 && promptText.length === scenario.prompt.length) { setTimeout(() => setStage(1), 800) } - }, [stage, promptText, scenario.prompt]) + }, [stage, promptText, scenario]) useEffect(() => { if (stage > 0 && stage < 3) { @@ -97,7 +97,6 @@ export function AIDemoZeroTokens() { { label: "May", value: 58932 }, { label: "Jun", value: 65100 }, ]} - height={250} />
)} @@ -108,7 +107,7 @@ export function AIDemoZeroTokens() { { key: "customer", header: "Customer" }, { key: "revenue", header: "Revenue" }, { key: "status", header: "Status" }, - ] as Column[]} + ] as Column>[]} data={[ { customer: "Acme Corp", revenue: "$45,231", status: "Active" }, { customer: "TechStart Inc", revenue: "$32,450", status: "Active" }, @@ -130,7 +129,7 @@ export function AIDemoZeroTokens() { { key: "name", header: "Name" }, { key: "email", header: "Email" }, { key: "role", header: "Role" }, - ] as Column[]} + ] as Column>[]} data={[ { name: "John Doe", email: "john@example.com", role: "Admin" }, { name: "Jane Smith", email: "jane@example.com", role: "User" }, @@ -196,7 +195,6 @@ export function AIDemoZeroTokens() { { label: "Sat", value: 3100 }, { label: "Sun", value: 2900 }, ]} - height={250} /> )} diff --git a/apps/playground/src/components/hero-animation.tsx b/apps/playground/src/components/hero-animation.tsx index b8f3752..86d325c 100644 --- a/apps/playground/src/components/hero-animation.tsx +++ b/apps/playground/src/components/hero-animation.tsx @@ -105,7 +105,6 @@ export function HeroAnimation() { { label: "May", value: 3200 }, { label: "Jun", value: 3500 }, ]} - height={250} /> )} diff --git a/apps/playground/src/components/pattern-gallery.tsx b/apps/playground/src/components/pattern-gallery.tsx index 42a6efd..4ae5f37 100644 --- a/apps/playground/src/components/pattern-gallery.tsx +++ b/apps/playground/src/components/pattern-gallery.tsx @@ -76,7 +76,6 @@ export function PatternGallery({ selectedPattern, onPatternSelect }: PatternGall { label: "Feb", value: 1900 }, { label: "Mar", value: 3000 }, ]} - height={180} /> ) diff --git a/apps/playground/src/components/pattern-sidebar.tsx b/apps/playground/src/components/pattern-sidebar.tsx index 909af90..7c5510a 100644 --- a/apps/playground/src/components/pattern-sidebar.tsx +++ b/apps/playground/src/components/pattern-sidebar.tsx @@ -2,7 +2,6 @@ import * as React from "react" import { cn } from "@agent-patterns/core" -import { Badge } from "./ui/badge" interface Pattern { id: string diff --git a/apps/playground/src/components/schema-viewer.tsx b/apps/playground/src/components/schema-viewer.tsx index 657171c..d3c0c77 100644 --- a/apps/playground/src/components/schema-viewer.tsx +++ b/apps/playground/src/components/schema-viewer.tsx @@ -10,7 +10,7 @@ interface SchemaViewerProps { patternName: string } -export function SchemaViewer({ schemaCode, patternName }: SchemaViewerProps) { +export function SchemaViewer({ schemaCode }: SchemaViewerProps) { return ( diff --git a/apps/playground/src/components/ui/code-block.tsx b/apps/playground/src/components/ui/code-block.tsx index 06dcb5c..085ca7c 100644 --- a/apps/playground/src/components/ui/code-block.tsx +++ b/apps/playground/src/components/ui/code-block.tsx @@ -21,8 +21,8 @@ const CodeBlock = React.forwardRef( setTimeout(() => setCopied(false), 2000) } - // Simple syntax highlighting (can be enhanced with a library like Prism or highlight.js) - const highlightCode = (code: string, lang: string) => { + // Simple syntax highlighting (can be enhanced with a library like Prism or highlight.js) + const highlightCode = (code: string, _lang: string) => { // Basic keyword highlighting const keywords = [ "import", diff --git a/patterns/agent-form/component.tsx b/patterns/agent-form/component.tsx index a04ff9a..fdb1710 100644 --- a/patterns/agent-form/component.tsx +++ b/patterns/agent-form/component.tsx @@ -75,7 +75,7 @@ export const AgentForm = React.forwardRef( field.validation.parse(formData[field.name]) } catch (err) { if (err instanceof z.ZodError) { - newErrors[field.name] = err.errors[0].message + newErrors[field.name] = err.errors[0]?.message || "Validation error" } } } @@ -136,7 +136,7 @@ export const AgentForm = React.forwardRef( field.validation.parse(formData[name]) } catch (err) { if (err instanceof z.ZodError) { - setErrors((prev) => ({ ...prev, [name]: err.errors[0].message })) + setErrors((prev) => ({ ...prev, [name]: err.errors[0]?.message || "Validation error" })) } } } diff --git a/patterns/chart/example.tsx b/patterns/chart/example.tsx index 490b6d3..fa8d66f 100644 --- a/patterns/chart/example.tsx +++ b/patterns/chart/example.tsx @@ -1,3 +1,4 @@ +import React from "react" import { Chart } from "./component" // Sample data sets diff --git a/patterns/chat-message/component.tsx b/patterns/chat-message/component.tsx index 1a3b756..f193976 100644 --- a/patterns/chat-message/component.tsx +++ b/patterns/chat-message/component.tsx @@ -1,6 +1,6 @@ "use client" -import { useState, useEffect, useRef } from "react" +import React, { useState, useEffect, useRef } from "react" import { cn } from "@agent-patterns/core" interface ChatMessageAction { diff --git a/patterns/chat-message/example.tsx b/patterns/chat-message/example.tsx index 057765a..fcf8bbc 100644 --- a/patterns/chat-message/example.tsx +++ b/patterns/chat-message/example.tsx @@ -1,3 +1,4 @@ +import React from "react" import { ChatMessage } from "./component" export default function ChatMessageExample() { diff --git a/vercel.json b/vercel.json index 9506aea..0144901 100644 --- a/vercel.json +++ b/vercel.json @@ -4,5 +4,16 @@ "devCommand": "pnpm --filter @agent-patterns/playground dev", "installCommand": "pnpm install", "framework": "nextjs", - "outputDirectory": "apps/playground/.next" + "outputDirectory": "apps/playground/.next", + "git": { + "deploymentEnabled": { + "main": false, + "master": false + } + }, + "github": { + "autoAlias": false, + "autoJobCancelation": true, + "silent": true + } }