diff --git a/cli/src/registry/default/artifacts.ts b/cli/src/registry/default/artifacts.ts index c5fa5ff..5fa44ba 100644 --- a/cli/src/registry/default/artifacts.ts +++ b/cli/src/registry/default/artifacts.ts @@ -352,4 +352,48 @@ export const artifacts: RegistryItem[] = [ }, ], }, + { + name: "thinking-process", + type: "registry:artifacts", + dependencies: [ + "react", + "clsx", + "tailwind-merge", + "zod", + "@copilotkit/react-core", + "lucide-react", + ], + registryDependencies: [], + files: [ + { + path: "hax/artifacts/thinking-process/thinking-process.tsx", + type: "registry:component", + content: readComponentFile( + "hax/artifacts/thinking-process/thinking-process.tsx", + ), + }, + { + path: "hax/artifacts/thinking-process/action.ts", + type: "registry:hook", + content: readComponentFile("hax/artifacts/thinking-process/action.ts"), + }, + { + path: "hax/artifacts/thinking-process/types.ts", + type: "registry:types", + content: readComponentFile("hax/artifacts/thinking-process/types.ts"), + }, + { + path: "hax/artifacts/thinking-process/index.ts", + type: "registry:index", + content: readComponentFile("hax/artifacts/thinking-process/index.ts"), + }, + { + path: "hax/artifacts/thinking-process/description.ts", + type: "registry:description", + content: readComponentFile( + "hax/artifacts/thinking-process/description.ts", + ), + }, + ], + }, ] diff --git a/cli/src/registry/github-registry/artifacts.json b/cli/src/registry/github-registry/artifacts.json index f3362df..b66eb1d 100644 --- a/cli/src/registry/github-registry/artifacts.json +++ b/cli/src/registry/github-registry/artifacts.json @@ -154,5 +154,24 @@ { "name": "index.ts", "type": "registry:index" }, { "name": "description.ts", "type": "registry:description" } ] + }, + "thinking-process": { + "type": "registry:artifacts", + "dependencies": [ + "react", + "clsx", + "tailwind-merge", + "zod", + "@copilotkit/react-core", + "lucide-react" + ], + "registryDependencies": [], + "files": [ + { "name": "thinking-process.tsx", "type": "registry:component" }, + { "name": "action.ts", "type": "registry:hook" }, + { "name": "types.ts", "type": "registry:types" }, + { "name": "index.ts", "type": "registry:index" }, + { "name": "description.ts", "type": "registry:description" } + ] } } diff --git a/hax/artifacts/thinking-process/README.md b/hax/artifacts/thinking-process/README.md new file mode 100644 index 0000000..6e453a5 --- /dev/null +++ b/hax/artifacts/thinking-process/README.md @@ -0,0 +1,323 @@ +# Thinking Process Artifact + +A HAX SDK component for visualizing AI reasoning, decision-making steps, and workflow progress. + +## Installation + +### Via HAX CLI (Recommended) + +First, ensure your project is initialized with HAX: + +```bash +hax init +``` + +Then add the thinking-process artifact: + +```bash +hax add artifact thinking-process +``` + +This will automatically: +- Install the component files to your configured artifacts path +- Install required dependencies +- Update your `hax.config.json` + +### Dependencies + +The following dependencies will be installed automatically: + +```bash +npm install react clsx tailwind-merge zod @copilotkit/react-core lucide-react +``` + +## Usage + +### Basic Component Usage + +```tsx +import { ThinkingProcess, ReasoningStep } from "@/artifacts/thinking-process"; + +const steps: ReasoningStep[] = [ + { + id: "1", + title: "Analyzing input data", + description: "Processing user query and context", + status: "completed", + }, + { + id: "2", + title: "Searching knowledge base", + status: "in-progress", + }, + { + id: "3", + title: "Generating response", + status: "pending", + }, +]; + +function App() { + return ( + + ); +} +``` + +### With CopilotKit Action + +```tsx +import { useThinkingProcessAction } from "@/artifacts/thinking-process"; + +function MyComponent() { + const addOrUpdateArtifact = (type, data) => { + // Handle artifact creation/update + console.log("Artifact:", type, data); + }; + + // Register the action with CopilotKit + useThinkingProcessAction({ addOrUpdateArtifact }); + + return
Your component
; +} +``` + +### HAX Wrapper Component + +```tsx +import { HAXThinkingProcess, ReasoningStep } from "@/artifacts/thinking-process"; + +const steps: ReasoningStep[] = [ + { id: "1", title: "Step 1", status: "completed" }, + { id: "2", title: "Step 2", status: "in-progress" }, +]; + +function App() { + return ( + + ); +} +``` + +## Components + +### ThinkingProcess + +Main card component displaying the complete thinking process. + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `title` | `string` | No | `"Thinking Process"` | Title for the card | +| `badge` | `string` | No | - | Badge text shown next to title | +| `steps` | `ReasoningStep[]` | Yes | - | Array of reasoning steps | +| `metrics` | `StepMetric[]` | No | `[]` | Step metrics to display | +| `showToggle` | `boolean` | No | `false` | Show reasoning process toggle | +| `toggleLabel` | `string` | No | `"Show reasoning process"` | Label for toggle | +| `showReasoning` | `boolean` | No | `true` | Whether reasoning is visible | +| `onToggleReasoning` | `(show: boolean) => void` | No | - | Toggle callback | +| `reasoningCollapsible` | `boolean` | No | `true` | Make reasoning section collapsible | +| `className` | `string` | No | - | Additional CSS classes | + +### AgentReasoning + +Collapsible section showing reasoning steps with purple theme. + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `title` | `string` | No | `"Agent Reasoning"` | Section title | +| `steps` | `ReasoningStep[]` | Yes | - | Array of reasoning steps | +| `expanded` | `boolean` | No | `true` | Whether section is expanded | +| `onExpandedChange` | `(expanded: boolean) => void` | No | - | Expand callback | +| `collapsible` | `boolean` | No | `true` | Show expand/collapse control | +| `className` | `string` | No | - | Additional CSS classes | + +### ProcessStep + +Individual step in the reasoning process. + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `title` | `string` | Yes | - | Step title | +| `description` | `string` | No | - | Step description | +| `status` | `ProcessStepStatus` | No | `"pending"` | Step status | +| `showIcon` | `boolean` | No | `true` | Whether to show status icon | +| `flipIcon` | `boolean` | No | `false` | Position icon on right | +| `className` | `string` | No | - | Additional CSS classes | + +### ConfidenceChip + +Displays metrics with label and value badge. + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `label` | `string` | No | `"Steps Completed"` | Label text | +| `value` | `string` | Yes | - | Badge/value text | +| `variant` | `"default" \| "badge"` | No | `"badge"` | Variant style | +| `className` | `string` | No | - | Additional CSS classes | + +## Schema + +### ReasoningStep Type + +```typescript +interface ReasoningStep { + id: string; // Unique identifier + title: string; // Step title + description?: string; // Optional description + status: ProcessStepStatus; // "completed" | "in-progress" | "pending" | "error" +} +``` + +### StepMetric Type + +```typescript +interface StepMetric { + label: string; // Metric label (e.g., "Steps Completed") + value: string; // Metric value (e.g., "3/5") +} +``` + +### ProcessStepStatus + +```typescript +type ProcessStepStatus = "completed" | "in-progress" | "pending" | "error"; +``` + +Status visual indicators: +- `completed`: Green checkmark +- `in-progress`: Spinning loader +- `pending`: Gray circle +- `error`: Red X + +### Zod Schema + +```typescript +import { ThinkingProcessArtifactZod } from "@/artifacts/thinking-process"; + +// Schema structure: +const ThinkingProcessArtifactZod = z.object({ + id: z.string(), + type: z.literal("thinking-process"), + data: z.object({ + title: z.string().optional(), + badge: z.string().optional(), + steps: z.array(z.object({ + id: z.string(), + title: z.string(), + description: z.string().optional(), + status: z.enum(["completed", "in-progress", "pending", "error"]), + })), + metrics: z.array(z.object({ + label: z.string(), + value: z.string(), + })).optional(), + showToggle: z.boolean().optional(), + reasoningCollapsible: z.boolean().optional(), + }), +}); +``` + +## CopilotKit Action + +The `useThinkingProcessAction` hook registers a `create_thinking_process` action with CopilotKit. + +### Action Parameters + +| Parameter | Type | Required | Description | +|-----------|------|----------|-------------| +| `title` | `string` | No | Title for the card (default: "Thinking Process") | +| `badge` | `string` | No | Badge text shown next to title | +| `stepsJson` | `string` | Yes | JSON string of reasoning steps array | +| `metricsJson` | `string` | No | JSON string of metrics array | +| `showToggle` | `boolean` | No | Show reasoning toggle (default: false) | +| `reasoningCollapsible` | `boolean` | No | Make reasoning collapsible (default: true) | + +### stepsJson Format + +```json +[ + { + "id": "step-1", + "title": "Analyzing data", + "description": "Processing input parameters", + "status": "completed" + }, + { + "id": "step-2", + "title": "Running analysis", + "status": "in-progress" + } +] +``` + +### metricsJson Format + +```json +[ + { "label": "Steps Completed", "value": "2/5" }, + { "label": "Confidence", "value": "85%" } +] +``` + +## Best Practices + +- Use clear, action-oriented step titles (e.g., "Analyzing input data", "Validating results") +- Mark current step as "in-progress" to show active processing +- Include descriptions for complex steps that need explanation +- Use metrics to show overall progress (e.g., "Steps Completed: 3/5") +- Limit to 3-7 steps per process for readability + +## When to Use + +Use thinking process artifacts for: +- Multi-step AI analysis visualization +- Debugging and troubleshooting workflows +- Agent reasoning chains +- Decision-making process transparency +- Any situation where users need to understand how conclusions were reached + +Avoid using thinking process for: +- Simple status updates +- Single-step operations +- When reasoning process isn't relevant to user understanding + +## Exports + +```typescript +// Components +export { HAXThinkingProcess, ThinkingProcess, AgentReasoning, ProcessStep, ConfidenceChip } + +// Types +export type { + ThinkingProcessProps, + AgentReasoningProps, + ProcessStepProps, + ProcessStepStatus, + ConfidenceChipProps, + ConfidenceChipVariant, + ReasoningStep, + StepMetric, +} + +// Action Hook +export { useThinkingProcessAction } + +// Schema +export { ThinkingProcessArtifactZod } +export type { ThinkingProcessArtifact } +``` + +## License + +Apache License 2.0 - Copyright 2025 Cisco Systems, Inc. and its affiliates diff --git a/hax/artifacts/thinking-process/action.ts b/hax/artifacts/thinking-process/action.ts new file mode 100644 index 0000000..6759475 --- /dev/null +++ b/hax/artifacts/thinking-process/action.ts @@ -0,0 +1,111 @@ +/* + * Copyright 2025 Cisco Systems, Inc. and its affiliates + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { useCopilotAction } from "@copilotkit/react-core" +import { ArtifactTab } from "./types" +import { THINKING_PROCESS_DESCRIPTION } from "./description" + +interface UseThinkingProcessActionProps { + addOrUpdateArtifact: ( + type: "thinking-process", + data: Extract["data"], + ) => void +} + +export const useThinkingProcessAction = ({ + addOrUpdateArtifact, +}: UseThinkingProcessActionProps) => { + useCopilotAction({ + name: "create_thinking_process", + description: THINKING_PROCESS_DESCRIPTION, + parameters: [ + { + name: "title", + type: "string", + description: + "Title for the thinking process card (default: 'Thinking Process')", + required: false, + }, + { + name: "badge", + type: "string", + description: "Badge text shown next to title (e.g., 'HAX 04')", + required: false, + }, + { + name: "stepsJson", + type: "string", + description: + "JSON string of reasoning steps array. Each step must have: id (unique string), title (string), status ('completed' | 'in-progress' | 'pending' | 'error'), and optionally description (string)", + required: true, + }, + { + name: "metricsJson", + type: "string", + description: + "JSON string of metrics array. Each metric must have: label (string), value (string). Example: [{\"label\": \"Steps Completed\", \"value\": \"3/5\"}]", + required: false, + }, + { + name: "showToggle", + type: "boolean", + description: + "Whether to show the reasoning process toggle (default: false)", + required: false, + }, + { + name: "reasoningCollapsible", + type: "boolean", + description: + "Whether the Agent Reasoning section is collapsible (default: true)", + required: false, + }, + ], + handler: async (args) => { + try { + const { + title, + badge, + stepsJson, + metricsJson, + showToggle, + reasoningCollapsible, + } = args + + const steps = JSON.parse(stepsJson) + const metrics = metricsJson ? JSON.parse(metricsJson) : undefined + + addOrUpdateArtifact("thinking-process", { + title, + badge, + steps, + metrics, + showToggle, + reasoningCollapsible, + }) + + return `Created thinking process "${title || "Thinking Process"}" with ${steps.length} steps` + } catch (error) { + console.error("Error in create_thinking_process handler:", error) + const errorMessage = + error instanceof Error ? error.message : "Unknown error" + return `Failed to create thinking process: ${errorMessage}` + } + }, + }) +} diff --git a/hax/artifacts/thinking-process/description.ts b/hax/artifacts/thinking-process/description.ts new file mode 100644 index 0000000..d206144 --- /dev/null +++ b/hax/artifacts/thinking-process/description.ts @@ -0,0 +1,44 @@ +/* + * Copyright 2025 Cisco Systems, Inc. and its affiliates + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +export const THINKING_PROCESS_DESCRIPTION = + `Use thinking process artifacts to visualize AI reasoning, decision-making steps, and workflow progress. Best for showing multi-step analysis, debugging processes, agent reasoning chains, and any situation where users need to understand how conclusions were reached. + +Structure each step with a clear title, optional description, and status indicator. The component displays steps in a collapsible violet-themed section with visual status indicators (completed, in-progress, pending, error). + +Features: +- Card header with customizable title and optional badge +- Collapsible Agent Reasoning section with purple theme +- Individual process steps with status icons (checkmark, spinner, circle, X) +- Step metrics/confidence chips for completion tracking +- Optional toggle to show/hide reasoning + +Step statuses: +- "completed": Green checkmark - step finished successfully +- "in-progress": Spinning loader - currently processing +- "pending": Gray circle - waiting to be processed +- "error": Red X - step failed or encountered an error + +Best practices: +- Use clear, action-oriented step titles (e.g., "Analyzing input data", "Validating results") +- Mark current step as "in-progress" to show active processing +- Include descriptions for complex steps that need explanation +- Use metrics to show overall progress (e.g., "Steps Completed: 3/5") +- Limit to 3-7 steps per process for readability + +Don't use thinking process for simple status updates or single-step operations. Avoid using it when the reasoning process isn't relevant to the user's understanding.` as const diff --git a/hax/artifacts/thinking-process/index.ts b/hax/artifacts/thinking-process/index.ts new file mode 100644 index 0000000..e77555c --- /dev/null +++ b/hax/artifacts/thinking-process/index.ts @@ -0,0 +1,38 @@ +/* + * Copyright 2025 Cisco Systems, Inc. and its affiliates + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +export { + HAXThinkingProcess, + ThinkingProcess, + AgentReasoning, + ProcessStep, + ConfidenceChip, +} from "./thinking-process" +export type { + ThinkingProcessProps, + AgentReasoningProps, + ProcessStepProps, + ProcessStepStatus, + ConfidenceChipProps, + ConfidenceChipVariant, + ReasoningStep, + StepMetric, +} from "./thinking-process" +export { useThinkingProcessAction } from "./action" +export type { ThinkingProcessArtifact } from "./types" +export { ThinkingProcessArtifactZod } from "./types" diff --git a/hax/artifacts/thinking-process/thinking-process.tsx b/hax/artifacts/thinking-process/thinking-process.tsx new file mode 100644 index 0000000..e6db734 --- /dev/null +++ b/hax/artifacts/thinking-process/thinking-process.tsx @@ -0,0 +1,470 @@ +/* + * Copyright 2025 Cisco Systems, Inc. and its affiliates + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +"use client" + +import * as React from "react" +import { cn } from "@/lib/utils" +import { + CheckCircle, + Circle, + Loader2, + XCircle, + Brain, + ChevronDown, + ChevronRight, +} from "lucide-react" + +// ============================================================================ +// ProcessStep Component +// ============================================================================ + +export type ProcessStepStatus = "completed" | "in-progress" | "pending" | "error" + +export interface ProcessStepProps { + /** Title of the process step */ + title: string + /** Optional description/details of the step */ + description?: string + /** Status of the step */ + status?: ProcessStepStatus + /** Whether to show the icon */ + showIcon?: boolean + /** Position icon on the right side instead of left */ + flipIcon?: boolean + /** Additional class names */ + className?: string +} + +export function ProcessStep({ + title, + description, + status = "pending", + showIcon = true, + flipIcon = false, + className, +}: ProcessStepProps) { + const isPending = status === "pending" + const isError = status === "error" + const isCompleted = status === "completed" + const isInProgress = status === "in-progress" + + const renderIcon = () => { + if (!showIcon) return null + return ( +
+ {isCompleted && } + {isInProgress && ( + + )} + {isPending && } + {isError && } +
+ ) + } + + return ( +
+
+ {!flipIcon && renderIcon()} +
+

+ {title} +

+ {description && ( +

+ {description} +

+ )} +
+ {flipIcon && renderIcon()} +
+
+ ) +} + +// ============================================================================ +// ConfidenceChip Component +// ============================================================================ + +export type ConfidenceChipVariant = "default" | "badge" + +export interface ConfidenceChipProps { + /** Label text (e.g., "Steps Completed") */ + label?: string + /** Badge/value text (e.g., "2/5" or "Label") */ + value: string + /** Variant style */ + variant?: ConfidenceChipVariant + /** Additional class names */ + className?: string +} + +export function ConfidenceChip({ + label = "Steps Completed", + value, + variant = "badge", + className, +}: ConfidenceChipProps) { + if (variant === "default") { + return ( +
+ + {label} + + + {value} + +
+ ) + } + + return ( +
+ + {label} + +
+ + {value} + +
+
+ ) +} + +// ============================================================================ +// ReasoningStep Type +// ============================================================================ + +export interface ReasoningStep { + /** Unique ID for the step */ + id: string + /** Title of the step */ + title: string + /** Description/details of the step */ + description?: string + /** Status of the step */ + status: ProcessStepStatus +} + +// ============================================================================ +// AgentReasoning Component +// ============================================================================ + +export interface AgentReasoningProps { + /** Title for the reasoning section */ + title?: string + /** Array of reasoning steps */ + steps: ReasoningStep[] + /** Whether the section is expanded */ + expanded?: boolean + /** Callback when expanded state changes */ + onExpandedChange?: (expanded: boolean) => void + /** Whether to show the expand/collapse control */ + collapsible?: boolean + /** Additional class names */ + className?: string +} + +export function AgentReasoning({ + title = "Agent Reasoning", + steps, + expanded = true, + onExpandedChange, + collapsible = true, + className, +}: AgentReasoningProps) { + const [isExpanded, setIsExpanded] = React.useState(expanded) + + const actualExpanded = onExpandedChange ? expanded : isExpanded + const handleToggle = () => { + if (onExpandedChange) { + onExpandedChange(!actualExpanded) + } else { + setIsExpanded(!isExpanded) + } + } + + return ( +
+
+
+ {collapsible && ( +
+ {actualExpanded ? ( + + ) : ( + + )} +
+ )} + {!collapsible && ( +
+ +
+ )} +

+ {title} +

+
+
+ + {actualExpanded && ( +
+
+
+ )} + + {actualExpanded && ( +
+ {steps.map((step) => ( + + ))} +
+ )} +
+ ) +} + +// ============================================================================ +// StepMetric Type +// ============================================================================ + +export interface StepMetric { + /** Label for the metric (e.g., "Steps Completed") */ + label: string + /** Value/badge text (e.g., "2/5") */ + value: string +} + +// ============================================================================ +// ThinkingProcess Component +// ============================================================================ + +export interface ThinkingProcessProps { + /** Title for the card */ + title?: string + /** Badge text shown next to title (e.g., "HAX 04") */ + badge?: string + /** Reasoning steps to display */ + steps: ReasoningStep[] + /** Step metrics to display (e.g., completion status) */ + metrics?: StepMetric[] + /** Whether to show the reasoning process toggle */ + showToggle?: boolean + /** Label for the toggle */ + toggleLabel?: string + /** Whether reasoning is visible (controlled) */ + showReasoning?: boolean + /** Callback when toggle changes */ + onToggleReasoning?: (show: boolean) => void + /** Whether the Agent Reasoning section is collapsible */ + reasoningCollapsible?: boolean + /** Additional class names */ + className?: string +} + +export function ThinkingProcess({ + title = "Thinking Process", + badge, + steps, + metrics = [], + showToggle = false, + toggleLabel = "Show reasoning process", + showReasoning = true, + onToggleReasoning, + reasoningCollapsible = true, + className, +}: ThinkingProcessProps) { + const [internalShowReasoning, setInternalShowReasoning] = + React.useState(showReasoning) + + const actualShowReasoning = onToggleReasoning + ? showReasoning + : internalShowReasoning + const handleToggle = () => { + if (onToggleReasoning) { + onToggleReasoning(!actualShowReasoning) + } else { + setInternalShowReasoning(!internalShowReasoning) + } + } + + return ( +
+ {/* Header */} +
+
+

+ {title} +

+ {badge && ( +
+
+ + {badge} + +
+
+ )} +
+
+ + {/* Agent Reasoning Section */} + {actualShowReasoning && ( + + )} + + {/* Step Metrics */} + {metrics.length > 0 && ( +
+ {metrics.map((metric, index) => ( + + ))} +
+ )} + + {/* Toggle */} + {showToggle && ( +
+
+

+ {toggleLabel} +

+
+ +
+ )} +
+ ) +} + +// ============================================================================ +// HAX Wrapper Component +// ============================================================================ + +interface HAXThinkingProcessProps { + title?: string + badge?: string + steps: ReasoningStep[] + metrics?: StepMetric[] + showToggle?: boolean + reasoningCollapsible?: boolean +} + +export function HAXThinkingProcess({ + title, + badge, + steps, + metrics, + showToggle, + reasoningCollapsible, +}: HAXThinkingProcessProps) { + return ( +
+ +
+ ) +} + +export default ThinkingProcess diff --git a/hax/artifacts/thinking-process/types.ts b/hax/artifacts/thinking-process/types.ts new file mode 100644 index 0000000..ce96938 --- /dev/null +++ b/hax/artifacts/thinking-process/types.ts @@ -0,0 +1,58 @@ +/* + * Copyright 2025 Cisco Systems, Inc. and its affiliates + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import z from "zod" + +const ProcessStepStatusZod = z.enum([ + "completed", + "in-progress", + "pending", + "error", +]) + +const ReasoningStepZod = z.object({ + id: z.string(), + title: z.string(), + description: z.string().optional(), + status: ProcessStepStatusZod, +}) + +const StepMetricZod = z.object({ + label: z.string(), + value: z.string(), +}) + +export const ThinkingProcessArtifactZod = z.object({ + id: z.string(), + type: z.literal("thinking-process"), + data: z.object({ + title: z.string().optional(), + badge: z.string().optional(), + steps: z.array(ReasoningStepZod), + metrics: z.array(StepMetricZod).optional(), + showToggle: z.boolean().optional(), + reasoningCollapsible: z.boolean().optional(), + }), +}) + +export type ThinkingProcessArtifact = z.infer + +export const ArtifactTabZod = z.discriminatedUnion("type", [ + ThinkingProcessArtifactZod, +]) +export type ArtifactTab = z.infer