Chat Template

A chat interface with user and assistant messages, including attachments, reasoning, and task lists. It shows a transcript with timestamps and groupings, and includes interactive elements like approvals and diffs. Use it to display AI-powered conversations with detailed interaction logs.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/chat-template

npx layro-cli add @educlopez/chat-template

npx layro-cli add @educlopez/chat-template

bunx layro-cli add @educlopez/chat-template

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

import type { AIApprovalOption } from "@/components/smoothui/ai-approval";
import type { AIDiffLine } from "@/components/smoothui/ai-diff";
import type { AIPromptAttachment } from "@/components/smoothui/ai-prompt-input";
import type { AIResponseCitation } from "@/components/smoothui/ai-response";
import type { AISource } from "@/components/smoothui/ai-sources";
import type { AISuggestion } from "@/components/smoothui/ai-suggestions";
import type { AITask } from "@/components/smoothui/ai-task-list";

/**
 * A transcript turn.
 *
 * Assistant turns are a bag of optional parts rather than a block of markdown,
 * because that is what an agent turn actually is: some thinking, some tool
 * calls, some produced artifact, then prose. Adding a new part means adding one