diff --git a/templates/next-chat-x402/.env.local b/templates/next-chat-x402/.env.local new file mode 100644 index 000000000..7f52fc1df --- /dev/null +++ b/templates/next-chat-x402/.env.local @@ -0,0 +1,6 @@ +ECHO_APP_ID="74d9c979-e036-4e43-904f-32d214b361fc" +NEXT_PUBLIC_ECHO_APP_ID="74d9c979-e036-4e43-904f-32d214b361fc" +NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="592e3344e57cbc26ad91d191e82a4185" + +# https://echo.router.merit.systems/ for production environment +BASE_URL= \ No newline at end of file diff --git a/templates/next-chat-x402/.gitignore b/templates/next-chat-x402/.gitignore new file mode 100644 index 000000000..e72b4d6a4 --- /dev/null +++ b/templates/next-chat-x402/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/templates/next-chat-x402/README.md b/templates/next-chat-x402/README.md new file mode 100644 index 000000000..0b2df61e5 --- /dev/null +++ b/templates/next-chat-x402/README.md @@ -0,0 +1,280 @@ +# Echo Next.js Chat Template + +A full-featured chat application built with Next.js and Echo, showcasing AI billing, user management, and authentication. + +## Quick Start + +Use the Echo CLI to create a new project with this template: + +```bash +npx echo-start@latest --template next-chat +``` + +You'll be prompted for your Echo App ID. Don't have one? Get it at [echo.merit.systems/new](https://echo.merit.systems/new). + +--- + +This is a demonstration Next.js application showcasing the power and simplicity of [Echo](https://echo.merit.systems) - a platform that provides AI billing, user management, and authentication for AI applications. + +## 🚀 What is Echo? + +Echo is a comprehensive platform that handles the complex infrastructure needed for AI applications, including: + +- **Dual Payment System** - Echo Credits (custodial) or USDC via x402 protocol (non-custodial) +- **AI Billing & Usage Tracking** - Automatic cost tracking and billing for AI API calls +- **User Authentication** - Secure sign-in and session management +- **Wallet Integration** - Connect Web3 wallets for crypto payments +- **Balance Management** - Real-time balance tracking and top-ups +- **Multi-Model Support** - Seamless integration with OpenAI, Anthropic, and other AI providers + +## 📋 Demo Features + +This demo application demonstrates: + +- ✅ **AI Chat Interface** - Interactive chat with GPT-4o and GPT-5 models +- ✅ **Dual Payment Options** - Pay with Echo Credits or USDC via wallet (x402) +- ✅ **Echo Authentication** - Secure user sign-in with Echo accounts +- ✅ **Wallet Connection** - Connect wallet to pay with USDC (non-custodial) +- ✅ **Real-time Balance Display** - Live balance tracking in the header +- ✅ **Automatic Billing** - AI usage automatically tracked and billed +- ✅ **Modern UI Components** - Beautiful, responsive interface with Tailwind CSS +- ✅ **Streaming Responses** - Real-time AI response streaming with reasoning display + +## 🏗️ Architecture Overview + +### Application Structure + +``` +src/ +├── app/ +│ ├── _components/ +│ │ ├── chat.tsx # Main chat interface component +│ │ ├── echo/ +│ │ │ ├── balance.tsx # Real-time balance display +│ │ │ └── sign-in-button.tsx # Echo authentication button +│ │ └── header.tsx # App header with auth state +│ ├── api/ +│ │ ├── chat/ +│ │ │ └── route.ts # Chat API endpoint using Echo OpenAI +│ │ └── echo/ +│ │ └── [...echo]/ +│ │ └── route.ts # Echo webhook handlers +│ ├── layout.tsx # Root layout with Echo integration +│ └── page.tsx # Main page with auth guard +├── echo/ +│ └── index.ts # Echo SDK configuration +└── components/ + ├── ai-elements/ # Reusable AI chat components + └── ui/ # Base UI components (shadcn/ui) +``` + +### Key Components + +#### 1. Echo SDK Configuration (`src/echo/index.ts`) + +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: 'your-echo-app-id', +}); +``` + +#### 2. Authentication Flow + +- **Sign-in**: Uses Echo's built-in authentication system +- **Session Management**: Automatic session handling across requests +- **Auth Guards**: Pages check authentication status server-side + +#### 3. AI Integration + +- **Model Access**: Direct access to OpenAI models through Echo +- **Automatic Billing**: All AI usage is tracked and billed automatically +- **Streaming**: Real-time response streaming with reasoning display + +#### 4. Balance Management + +- **Real-time Updates**: Live balance display in the header +- **Automatic Deduction**: Costs automatically deducted from user balance +- **Top-up Integration**: Users can add funds through Echo platform + +## 🔧 Echo Integration Details + +### Authentication + +The app uses Echo's authentication system which provides: + +- Secure OAuth-based sign-in +- Session management +- User identity verification + +```typescript +// Check if user is signed in (server-side) +const signedIn = await isSignedIn(); + +// Sign in user (client-side) +import { signIn } from '@merit-systems/echo-next-sdk/client'; +signIn(); +``` + +### AI Model Access + +Echo provides direct access to AI models with automatic billing: + +```typescript +import { openai } from '@/echo'; + +// Use OpenAI models with automatic billing +const result = streamText({ + model: openai('gpt-4o'), // or "gpt-5-nano" + messages: convertToModelMessages(messages), +}); +``` + +### Balance Management + +Real-time balance tracking and display: + +```typescript +import { useEcho } from '@merit-systems/echo-next-sdk/client'; + +const echoClient = useEcho(); +const balanceData = await echoClient.balance.getBalance(); +``` + +### API Endpoints + +Echo provides webhook handlers for various platform events: + +```typescript +// src/app/api/echo/[...echo]/route.ts +import { handlers } from '@/echo'; +export const { GET, POST } = handlers; +``` + +## 🚦 Getting Started + +### Prerequisites + +- Node.js 18+ +- pnpm (recommended) or npm +- An Echo account ([sign up here](https://echo.merit.systems)) + +### Setup + +1. **Clone the repository** + + ```bash + git clone + cd my-next-ai-app + ``` + +2. **Install dependencies** + + ```bash + pnpm install + ``` + +3. **Configure Echo** + - Visit [echo.merit.systems](https://echo.merit.systems) + - Create a new app and get your App ID + - Update `src/echo/index.ts` with your App ID + +4. **Run the development server** + + ```bash + pnpm dev + ``` + +5. **Open the app** + Navigate to [http://localhost:3000](http://localhost:3000) + +### Environment Setup + +Create a `.env.local` file: + +```bash +ECHO_APP_ID=your_echo_app_id +NEXT_PUBLIC_ECHO_APP_ID=your_echo_app_id +NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id + +# Optional: Override Echo API base URL +BASE_URL=https://api.echo.merit.systems/v1 +``` + +Get your WalletConnect project ID at [cloud.walletconnect.com](https://cloud.walletconnect.com) + +## 💳 Payment Methods + +This template supports two payment options: + +### Echo Credits (Custodial) +- Sign in with social accounts (Google, GitHub, etc.) +- Pre-load credits to your Echo account +- Automatic deduction per API call +- No wallet required +- Best for non-crypto users + +### USDC via x402 (Non-Custodial) +- Connect your Ethereum wallet (RainbowKit) +- Pay directly from wallet using USDC +- No account required +- Full custody of funds +- Best for crypto-native users + +The app automatically detects which payment method is active and handles billing accordingly. For more details on the payment implementation, see [`payment.md`](./payment.md). + +## 📚 Learn More + +### Echo Documentation + +- **Platform**: [echo.merit.systems](https://echo.merit.systems) +- **Next.js Integration Guide**: [echo.merit.systems/docs/nextjs](https://echo.merit.systems/docs/nextjs) +- **API Documentation**: Available in your Echo dashboard + +### Technology Stack + +- **Framework**: Next.js 15 with App Router +- **AI SDK**: Vercel AI SDK with Echo integration +- **Styling**: Tailwind CSS +- **UI Components**: Radix UI primitives with shadcn/ui +- **Authentication**: Echo built-in auth system +- **Billing**: Automatic through Echo platform + +## 🔄 How It Works + +1. **User Authentication**: Users sign in through Echo's secure authentication system +2. **Balance Check**: App displays user's current balance in real-time +3. **AI Interaction**: Users chat with AI models (GPT-4o, GPT-5 nano) +4. **Automatic Billing**: Each AI request is automatically tracked and billed +5. **Balance Updates**: User balance is updated in real-time after each request + +## 💡 Key Benefits of Echo + +- **Zero Infrastructure Setup**: No need to manage API keys, billing systems, or user databases +- **Automatic Cost Tracking**: Every AI request is tracked and billed automatically +- **Built-in Authentication**: Secure user management out of the box +- **Multi-Model Support**: Access to multiple AI providers through one interface +- **Real-time Balance**: Users can see their usage and remaining balance instantly +- **Developer Friendly**: Simple SDK integration with minimal boilerplate + +## 🚀 Deployment + +This app can be deployed to any platform that supports Next.js: + +- **Vercel** (recommended): `vercel deploy` +- **Netlify**: Connect your git repository +- **Railway**: `railway deploy` +- **Docker**: Use the included Dockerfile + +Make sure to update your Echo app configuration with your production domain. + +## 📞 Support + +- **Echo Platform**: [echo.merit.systems](https://echo.merit.systems) +- **Documentation**: [echo.merit.systems/docs/nextjs](https://echo.merit.systems/docs/nextjs) +- **Issues**: Create an issue in this repository + +--- + +Built with ❤️ using [Echo](https://echo.merit.systems) - The simplest way to build AI applications with built-in billing and user management. diff --git a/templates/next-chat-x402/components.json b/templates/next-chat-x402/components.json new file mode 100644 index 000000000..edcaef267 --- /dev/null +++ b/templates/next-chat-x402/components.json @@ -0,0 +1,22 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "registries": {} +} diff --git a/templates/next-chat-x402/eslint.config.mjs b/templates/next-chat-x402/eslint.config.mjs new file mode 100644 index 000000000..c884132a1 --- /dev/null +++ b/templates/next-chat-x402/eslint.config.mjs @@ -0,0 +1,19 @@ +import { FlatCompat } from '@eslint/eslintrc' + +const compat = new FlatCompat({ + // import.meta.dirname is available after Node.js v20.11.0 + baseDirectory: import.meta.dirname, +}) + +const eslintConfig = [ + ...compat.config({ + extends: ['next'], + settings: { + next: { + rootDir: 'examples/nextjs-chatbot/', + }, + }, + }), +] + +export default eslintConfig \ No newline at end of file diff --git a/templates/next-chat-x402/next.config.ts b/templates/next-chat-x402/next.config.ts new file mode 100644 index 000000000..1332615e1 --- /dev/null +++ b/templates/next-chat-x402/next.config.ts @@ -0,0 +1,10 @@ +import type { NextConfig } from 'next'; + +const nextConfig: NextConfig = { + /* config options here */ + turbopack: { + root: '.', + }, +}; + +export default nextConfig; diff --git a/templates/next-chat-x402/package.json b/templates/next-chat-x402/package.json new file mode 100644 index 000000000..dc5fd254f --- /dev/null +++ b/templates/next-chat-x402/package.json @@ -0,0 +1,60 @@ +{ + "name": "next-chat-x402", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev --turbopack", + "build": "next build", + "start": "next start", + "lint": "biome check --write", + "postinstall": "npm dedupe || true" + }, + "dependencies": { + "@ai-sdk/react": "2.0.17", + "@merit-systems/ai-x402": "^0.1.4", + "@merit-systems/echo-next-sdk": "latest", + "@merit-systems/echo-react-sdk": "latest", + "@radix-ui/react-avatar": "^1.1.10", + "@radix-ui/react-collapsible": "^1.1.12", + "@radix-ui/react-dialog": "^1.1.15", + "@radix-ui/react-hover-card": "^1.1.15", + "@radix-ui/react-popover": "^1.1.15", + "@radix-ui/react-scroll-area": "^1.2.10", + "@radix-ui/react-select": "^2.2.6", + "@radix-ui/react-slot": "^1.2.3", + "@radix-ui/react-tooltip": "^1.2.8", + "@radix-ui/react-use-controllable-state": "^1.2.2", + "@rainbow-me/rainbowkit": "^2.2.9", + "@tanstack/react-query": "^5.90.6", + "ai": "5.0.19", + "autonumeric": "^4.10.9", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "embla-carousel-react": "^8.6.0", + "lucide-react": "^0.542.0", + "next": "15.5.2", + "react": "19.1.0", + "react-dom": "19.1.0", + "react-syntax-highlighter": "^15.6.6", + "shiki": "^3.12.2", + "streamdown": "^1.2.0", + "tailwind-merge": "^3.3.1", + "use-stick-to-bottom": "^1.1.1", + "viem": "^2.x", + "wagmi": "^2.19.2", + "x402": "^0.6.6", + "zod": "^4.1.5" + }, + "devDependencies": { + "@eslint/eslintrc": "^3", + "@next/eslint-plugin-next": "^15.5.3", + "@tailwindcss/postcss": "^4", + "@types/node": "^20", + "@types/react": "^19", + "@types/react-dom": "^19", + "@types/react-syntax-highlighter": "^15.5.13", + "tailwindcss": "^4", + "tw-animate-css": "^1.3.8", + "typescript": "^5" + } +} diff --git a/templates/next-chat-x402/postcss.config.mjs b/templates/next-chat-x402/postcss.config.mjs new file mode 100644 index 000000000..f50127cda --- /dev/null +++ b/templates/next-chat-x402/postcss.config.mjs @@ -0,0 +1,5 @@ +const config = { + plugins: ["@tailwindcss/postcss"], +}; + +export default config; diff --git a/templates/next-chat-x402/public/file.svg b/templates/next-chat-x402/public/file.svg new file mode 100644 index 000000000..004145cdd --- /dev/null +++ b/templates/next-chat-x402/public/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/next-chat-x402/public/globe.svg b/templates/next-chat-x402/public/globe.svg new file mode 100644 index 000000000..567f17b0d --- /dev/null +++ b/templates/next-chat-x402/public/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/next-chat-x402/public/logo/dark.svg b/templates/next-chat-x402/public/logo/dark.svg new file mode 100644 index 000000000..31c6d2b07 --- /dev/null +++ b/templates/next-chat-x402/public/logo/dark.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/templates/next-chat-x402/public/logo/light.svg b/templates/next-chat-x402/public/logo/light.svg new file mode 100644 index 000000000..4462aad0a --- /dev/null +++ b/templates/next-chat-x402/public/logo/light.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/templates/next-chat-x402/public/next.svg b/templates/next-chat-x402/public/next.svg new file mode 100644 index 000000000..5174b28c5 --- /dev/null +++ b/templates/next-chat-x402/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/next-chat-x402/public/vercel.svg b/templates/next-chat-x402/public/vercel.svg new file mode 100644 index 000000000..770539603 --- /dev/null +++ b/templates/next-chat-x402/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/next-chat-x402/public/window.svg b/templates/next-chat-x402/public/window.svg new file mode 100644 index 000000000..b2b2a44f6 --- /dev/null +++ b/templates/next-chat-x402/public/window.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/next-chat-x402/src/app/_components/chat.tsx b/templates/next-chat-x402/src/app/_components/chat.tsx new file mode 100644 index 000000000..056182db6 --- /dev/null +++ b/templates/next-chat-x402/src/app/_components/chat.tsx @@ -0,0 +1,337 @@ +'use client'; + +import { CopyIcon, MessageSquare, ChevronDown } from 'lucide-react'; +import { Fragment, useState, useEffect, useRef } from 'react'; +import { useChatWithPayment } from '@merit-systems/ai-x402'; +import { useAccount, useSwitchChain, useWalletClient } from 'wagmi'; +import { base } from 'wagmi/chains'; +import { useScrollable } from '@/lib/use-scrollable'; +import { Action, Actions } from '@/components/ai-elements/actions'; +import { + Conversation, + ConversationContent, + ConversationEmptyState, + ConversationScrollButton, +} from '@/components/ai-elements/conversation'; +import { Loader } from '@/components/ai-elements/loader'; +import { Message, MessageContent } from '@/components/ai-elements/message'; +import { + PromptInput, + PromptInputModelSelect, + PromptInputModelSelectContent, + PromptInputModelSelectItem, + PromptInputModelSelectTrigger, + PromptInputModelSelectValue, + PromptInputSubmit, + PromptInputTextarea, + PromptInputToolbar, + PromptInputTools, +} from '@/components/ai-elements/prompt-input'; +import { + Reasoning, + ReasoningContent, + ReasoningTrigger, +} from '@/components/ai-elements/reasoning'; +import { Response } from '@/components/ai-elements/response'; +import { + Source, + Sources, + SourcesContent, + SourcesTrigger, +} from '@/components/ai-elements/sources'; +import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion'; +import { Button } from '@/components/ui/button'; +import { Signer } from 'x402/types'; + +const models = [ + { + name: 'GPT 4o', + value: 'gpt-4o', + }, + { + name: 'GPT 5', + value: 'gpt-5', + }, +]; + +const suggestions = [ + 'Can you explain how to play tennis?', + 'Write me a code snippet of how to use the vercel ai sdk to create a chatbot', + 'How do I make a really good fish taco?', +]; + +const ChatBotDemo = () => { + const [input, setInput] = useState(''); + const [model, setModel] = useState(models[0].value); + const [isDismissed, setIsDismissed] = useState(false); + const { data: walletClient } = useWalletClient(); + const { chain } = useAccount(); + const { switchChainAsync } = useSwitchChain(); + const conversationContentRef = useRef(null); + const { isScrollable, scrollToBottom } = useScrollable(conversationContentRef); + const { messages, sendMessage, status, error } = useChatWithPayment({ + walletClient: walletClient as Signer, + regenerateOptions: { + body: { model }, + headers: { 'use-x402': 'true' }, + }, + }); + + const ensureBaseChain = async () => { + try { + if (chain?.id !== base.id) { + await switchChainAsync({ chainId: base.id }); + } + } catch { + // ignore; user may cancel switch prompt + } + }; + + const isPaymentRequiredError = (err: unknown): boolean => { + if (!err || typeof err !== 'object') return false; + const maybeError = err as { message?: string }; + if (!maybeError.message) return false; + try { + const parsed = JSON.parse(maybeError.message); + const hasVersion = + parsed && typeof parsed.x402Version === 'number'; + const hasAccepts = Array.isArray(parsed?.accepts); + return !!(hasVersion && hasAccepts); + } catch { + return false; + } + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (input.trim()) { + if (walletClient) { + await ensureBaseChain(); + } + sendMessage( + { text: input }, + { + body: { + model: model, + }, + headers: walletClient ? { 'use-x402': 'true' } : {}, + } + ); + setInput(''); + // Scroll to bottom when submitting a new message + setTimeout(() => scrollToBottom(), 100); + } + }; + + const handleSuggestionClick = async (suggestion: string) => { + if (walletClient) { + await ensureBaseChain(); + } + sendMessage( + { text: suggestion }, + { + body: { + model: model, + }, + headers: walletClient ? { 'use-x402': 'true' } : {}, + } + ); + // Scroll to bottom when submitting a new message + setTimeout(() => scrollToBottom(), 100); + }; + + const handleDismissError = () => { + setIsDismissed(true); + }; + + // Reset dismissed state when sending a new message + useEffect(() => { + if (status === 'submitted') { + setIsDismissed(false); + } + }, [status]); + + // Scroll to bottom when a new message is added + useEffect(() => { + if (messages.length > 0) { + setTimeout(() => scrollToBottom(), 100); + } + }, [messages.length, scrollToBottom]); + + return ( +
+
+ +
+ + {messages.length === 0 ? ( + } + title="No messages yet" + description="Start a conversation to see messages here" + /> + ) : ( + messages.map(message => ( +
+ {message.role === 'assistant' && + message.parts.filter(part => part.type === 'source-url') + .length > 0 && ( + + part.type === 'source-url' + ).length + } + /> + {message.parts + .filter(part => part.type === 'source-url') + .map((part, i) => ( + + + + ))} + + )} + {message.parts.map((part, i) => { + switch (part.type) { + case 'text': + return ( + + + + + {part.text} + + + + {message.role === 'assistant' && + i === messages.length - 1 && ( + + + navigator.clipboard.writeText(part.text) + } + label="Copy" + > + + + + )} + + ); + case 'reasoning': + return ( + + + {part.text} + + ); + default: + return null; + } + })} +
+ )) + )} + {status === 'submitted' && } + +
+
+ {isScrollable && ( + + )} + + + + {error && !isDismissed && !isPaymentRequiredError(error) && ( +
+
+
+

+ Error +

+

+ {error?.message || 'An error occurred while processing your request.'} +

+
+ +
+
+ )} + + + {suggestions.map(suggestion => ( + + ))} + + + + setInput(e.target.value)} + value={input} + /> + + + { + setModel(value); + }} + value={model} + > + + + + + {models.map(model => ( + + {model.name} + + ))} + + + + + + +
+
+ ); +}; + +export default ChatBotDemo; diff --git a/templates/next-chat-x402/src/app/_components/echo/balance.tsx b/templates/next-chat-x402/src/app/_components/echo/balance.tsx new file mode 100644 index 000000000..76cec986e --- /dev/null +++ b/templates/next-chat-x402/src/app/_components/echo/balance.tsx @@ -0,0 +1,50 @@ +'use client'; + +import { useEcho } from '@merit-systems/echo-next-sdk/client'; +import { useEffect, useState } from 'react'; +import { Button } from '@/components/ui/button'; + +interface BalanceData { + balance: number; + currency?: string; +} + +export default function Balance() { + const [balanceData, setBalanceData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const { balance, echoClient } = useEcho(); + + useEffect(() => { + if (balance) { + setBalanceData({ balance: balance.balance || 0, currency: 'USD' }); + setLoading(false); + } + }, [balance]); + + const formatBalance = (amount: number, currency = 'USD') => { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: currency, + minimumFractionDigits: 0, + maximumFractionDigits: 2, + }).format(amount); + }; + + return ( + + ); +} diff --git a/templates/next-chat-x402/src/app/_components/echo/sign-in-button.tsx b/templates/next-chat-x402/src/app/_components/echo/sign-in-button.tsx new file mode 100644 index 000000000..d31e5f1c6 --- /dev/null +++ b/templates/next-chat-x402/src/app/_components/echo/sign-in-button.tsx @@ -0,0 +1,21 @@ +'use client'; + +import { Button } from '@/components/ui/button'; +import { AuthModal } from '@/components/auth-modal'; +import { useState } from 'react'; + +export default function SignInButton() { + const [authModalOpen, setAuthModalOpen] = useState(false); + + return ( + <> + + + + ); +} diff --git a/templates/next-chat-x402/src/app/_components/header.tsx b/templates/next-chat-x402/src/app/_components/header.tsx new file mode 100644 index 000000000..0e4e6bd5e --- /dev/null +++ b/templates/next-chat-x402/src/app/_components/header.tsx @@ -0,0 +1,34 @@ +"use client"; + +import { ConnectionSelector } from '@/components/connection-selector'; +import type { FC } from 'react'; + +interface HeaderProps { + title?: string; + className?: string; +} + +const Header: FC = ({ + title = 'My App', + className = '', +}) => { + return ( +
+
+
+
+

{title}

+
+ + +
+
+
+ ); +}; + +export default Header; diff --git a/templates/next-chat-x402/src/app/api/chat/route.ts b/templates/next-chat-x402/src/app/api/chat/route.ts new file mode 100644 index 000000000..eb0a57f78 --- /dev/null +++ b/templates/next-chat-x402/src/app/api/chat/route.ts @@ -0,0 +1,153 @@ +import { convertToModelMessages, streamText } from 'ai'; +import { + createX402OpenAIWithoutPayment, + UiStreamOnError, +} from '@merit-systems/ai-x402/server'; +import { openai, getEchoToken } from '@/echo'; + +export const maxDuration = 30; + +async function validateAuthentication(useX402: boolean): Promise<{ + token?: string | null; + error?: Response; +}> { + if (useX402) { + return {}; + } + + try { + const token = await getEchoToken(); + if (!token) { + return { + error: new Response( + JSON.stringify({ error: 'Authentication failed' }), + { status: 500, headers: { 'Content-Type': 'application/json' } } + ), + }; + } + return { token }; + } catch { + return { + error: new Response( + JSON.stringify({ error: 'Authentication failed' }), + { status: 500, headers: { 'Content-Type': 'application/json' } } + ), + }; + } +} + +function validateChatRequest(body: unknown): { + isValid: boolean; + data?: { model: string; messages: any[] }; + error?: { message: string; status: number }; +} { + if (!body || typeof body !== 'object') { + return { + isValid: false, + error: { message: 'Invalid request body', status: 400 }, + }; + } + + const { model, messages } = body as Record; + + if (!model || typeof model !== 'string') { + return { + isValid: false, + error: { message: 'Model parameter is required', status: 400 }, + }; + } + + if (!messages || !Array.isArray(messages)) { + return { + isValid: false, + error: { + message: 'Messages parameter is required and must be an array', + status: 400, + }, + }; + } + + return { + isValid: true, + data: { model, messages }, + }; +} + +export async function POST(req: Request) { + try { + const useX402Header = req.headers.get('use-x402'); + const hasPaymentHeader = !!req.headers.get('x-payment'); + const useX402 = useX402Header === 'true' || hasPaymentHeader; + const body = await req.json(); + + const validation = validateChatRequest(body); + if (!validation.isValid || !validation.data) { + return new Response( + JSON.stringify({ + error: 'Bad Request', + message: validation.error!.message, + }), + { + status: validation.error!.status, + headers: { 'Content-Type': 'application/json' }, + } + ); + } + + const { model, messages } = validation.data; + + if (useX402) { + const authResult = await validateAuthentication(true); + if (authResult.error) { + return authResult.error; + } + + // For x402, payment is handled client-side via useChatWithPayment. + // Use the router without server-side payment handling so 402 bubbles to client. + const x402OpenAI = createX402OpenAIWithoutPayment({ + // If not provided, defaults to https://echo.router.merit.systems + baseRouterUrl: process.env.X402_ROUTER_URL, + echoAppId: process.env.ECHO_APP_ID, + }); + + const result = streamText({ + model: x402OpenAI(model), + messages: convertToModelMessages(messages), + }); + + return result.toUIMessageStreamResponse({ + sendSources: true, + sendReasoning: true, + onError: UiStreamOnError(), + }); + } + + const authResult = await validateAuthentication(false); + if (authResult.error) { + return authResult.error; + } + + const result = streamText({ + model: openai(model), + messages: convertToModelMessages(messages), + }); + + return result.toUIMessageStreamResponse({ + sendSources: true, + sendReasoning: true, + }); + } catch (error) { + console.error('Chat API error:', error); + + return new Response( + JSON.stringify({ + error: 'Internal server error', + message: 'Failed to process chat request', + }), + { + status: 500, + headers: { 'Content-Type': 'application/json' }, + } + ); + } +} diff --git a/templates/next-chat-x402/src/app/api/echo/[...echo]/route.ts b/templates/next-chat-x402/src/app/api/echo/[...echo]/route.ts new file mode 100644 index 000000000..c7296d950 --- /dev/null +++ b/templates/next-chat-x402/src/app/api/echo/[...echo]/route.ts @@ -0,0 +1,2 @@ +import { handlers } from '@/echo'; +export const { GET, POST } = handlers; diff --git a/templates/next-chat-x402/src/app/favicon.ico b/templates/next-chat-x402/src/app/favicon.ico new file mode 100644 index 000000000..b30699db5 Binary files /dev/null and b/templates/next-chat-x402/src/app/favicon.ico differ diff --git a/templates/next-chat-x402/src/app/globals.css b/templates/next-chat-x402/src/app/globals.css new file mode 100644 index 000000000..1ce36e908 --- /dev/null +++ b/templates/next-chat-x402/src/app/globals.css @@ -0,0 +1,124 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@source "../node_modules/streamdown/dist/index.js"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.616 0.166 223.7); + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.616 0.166 223.7); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.616 0.166 223.7); + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.616 0.166 223.7); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/templates/next-chat-x402/src/app/layout.tsx b/templates/next-chat-x402/src/app/layout.tsx new file mode 100644 index 000000000..a045d10af --- /dev/null +++ b/templates/next-chat-x402/src/app/layout.tsx @@ -0,0 +1,39 @@ +import Header from '@/app/_components/header'; +import { Providers } from '@/providers'; +import type { Metadata } from 'next'; +import { Geist, Geist_Mono } from 'next/font/google'; +import './globals.css'; + +const geistSans = Geist({ + variable: '--font-geist-sans', + subsets: ['latin'], +}); + +const geistMono = Geist_Mono({ + variable: '--font-geist-mono', + subsets: ['latin'], +}); + +export const metadata: Metadata = { + title: 'Echo Chat', + description: 'AI-powered chat application with Echo billing integration', +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + +
+
{children}
+ + + + ); +} diff --git a/templates/next-chat-x402/src/app/page.tsx b/templates/next-chat-x402/src/app/page.tsx new file mode 100644 index 000000000..b83d05ce9 --- /dev/null +++ b/templates/next-chat-x402/src/app/page.tsx @@ -0,0 +1,57 @@ +"use client"; + +import Chat from '@/app/_components/chat'; +import SignInButton from '@/app/_components/echo/sign-in-button'; +import { Skeleton } from '@/components/ui/skeleton'; +import { useEcho } from '@merit-systems/echo-react-sdk'; +import { useAccount } from 'wagmi'; + +export default function Home() { + const { isLoggedIn, isLoading } = useEcho(); + const { isConnected, isConnecting } = useAccount(); + + if (isLoading || isConnecting) { + return ( +
+
+
+ + +
+ +
+ + +
+
+
+ ); + } + + if (!isLoggedIn && !isConnected) { + return ( +
+
+
+

+ Echo Demo App +

+

+ AI-powered chat with built-in billing and user management +

+
+ +
+ + +
+ Secure authentication with built-in AI billing +
+
+
+
+ ); + } + + return ; +} diff --git a/templates/next-chat-x402/src/components/ai-elements/actions.tsx b/templates/next-chat-x402/src/components/ai-elements/actions.tsx new file mode 100644 index 000000000..c806be915 --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/actions.tsx @@ -0,0 +1,65 @@ +'use client'; + +import type { ComponentProps } from 'react'; +import { Button } from '@/components/ui/button'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip'; +import { cn } from '@/lib/utils'; + +export type ActionsProps = ComponentProps<'div'>; + +export const Actions = ({ className, children, ...props }: ActionsProps) => ( +
+ {children} +
+); + +export type ActionProps = ComponentProps & { + tooltip?: string; + label?: string; +}; + +export const Action = ({ + tooltip, + children, + label, + className, + variant = 'ghost', + size = 'sm', + ...props +}: ActionProps) => { + const button = ( + + ); + + if (tooltip) { + return ( + + + {button} + +

{tooltip}

+ + + + ); + } + + return button; +}; diff --git a/templates/next-chat-x402/src/components/ai-elements/branch.tsx b/templates/next-chat-x402/src/components/ai-elements/branch.tsx new file mode 100644 index 000000000..902afccf9 --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/branch.tsx @@ -0,0 +1,212 @@ +'use client'; + +import type { UIMessage } from 'ai'; +import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'; +import type { ComponentProps, HTMLAttributes, ReactElement } from 'react'; +import { createContext, useContext, useEffect, useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; + +type BranchContextType = { + currentBranch: number; + totalBranches: number; + goToPrevious: () => void; + goToNext: () => void; + branches: ReactElement[]; + setBranches: (branches: ReactElement[]) => void; +}; + +const BranchContext = createContext(null); + +const useBranch = () => { + const context = useContext(BranchContext); + + if (!context) { + throw new Error('Branch components must be used within Branch'); + } + + return context; +}; + +export type BranchProps = HTMLAttributes & { + defaultBranch?: number; + onBranchChange?: (branchIndex: number) => void; +}; + +export const Branch = ({ + defaultBranch = 0, + onBranchChange, + className, + ...props +}: BranchProps) => { + const [currentBranch, setCurrentBranch] = useState(defaultBranch); + const [branches, setBranches] = useState([]); + + const handleBranchChange = (newBranch: number) => { + setCurrentBranch(newBranch); + onBranchChange?.(newBranch); + }; + + const goToPrevious = () => { + const newBranch = + currentBranch > 0 ? currentBranch - 1 : branches.length - 1; + handleBranchChange(newBranch); + }; + + const goToNext = () => { + const newBranch = + currentBranch < branches.length - 1 ? currentBranch + 1 : 0; + handleBranchChange(newBranch); + }; + + const contextValue: BranchContextType = { + currentBranch, + totalBranches: branches.length, + goToPrevious, + goToNext, + branches, + setBranches, + }; + + return ( + +
div]:pb-0', className)} + {...props} + /> + + ); +}; + +export type BranchMessagesProps = HTMLAttributes; + +export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => { + const { currentBranch, setBranches, branches } = useBranch(); + const childrenArray = Array.isArray(children) ? children : [children]; + + // Use useEffect to update branches when they change + useEffect(() => { + if (branches.length !== childrenArray.length) { + setBranches(childrenArray); + } + }, [childrenArray, branches, setBranches]); + + return childrenArray.map((branch, index) => ( +
div]:pb-0', + index === currentBranch ? 'block' : 'hidden' + )} + key={branch.key} + {...props} + > + {branch} +
+ )); +}; + +export type BranchSelectorProps = HTMLAttributes & { + from: UIMessage['role']; +}; + +export const BranchSelector = ({ + className, + from, + ...props +}: BranchSelectorProps) => { + const { totalBranches } = useBranch(); + + // Don't render if there's only one branch + if (totalBranches <= 1) { + return null; + } + + return ( +
+ ); +}; + +export type BranchPreviousProps = ComponentProps; + +export const BranchPrevious = ({ + className, + children, + ...props +}: BranchPreviousProps) => { + const { goToPrevious, totalBranches } = useBranch(); + + return ( + + ); +}; + +export type BranchNextProps = ComponentProps; + +export const BranchNext = ({ + className, + children, + ...props +}: BranchNextProps) => { + const { goToNext, totalBranches } = useBranch(); + + return ( + + ); +}; + +export type BranchPageProps = HTMLAttributes; + +export const BranchPage = ({ className, ...props }: BranchPageProps) => { + const { currentBranch, totalBranches } = useBranch(); + + return ( + + {currentBranch + 1} of {totalBranches} + + ); +}; diff --git a/templates/next-chat-x402/src/components/ai-elements/code-block.tsx b/templates/next-chat-x402/src/components/ai-elements/code-block.tsx new file mode 100644 index 000000000..1574767fb --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/code-block.tsx @@ -0,0 +1,148 @@ +'use client'; + +import { CheckIcon, CopyIcon } from 'lucide-react'; +import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'; +import { createContext, useContext, useState } from 'react'; +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { + oneDark, + oneLight, +} from 'react-syntax-highlighter/dist/esm/styles/prism'; +import { Button } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; + +type CodeBlockContextType = { + code: string; +}; + +const CodeBlockContext = createContext({ + code: '', +}); + +export type CodeBlockProps = HTMLAttributes & { + code: string; + language: string; + showLineNumbers?: boolean; + children?: ReactNode; +}; + +export const CodeBlock = ({ + code, + language, + showLineNumbers = false, + className, + children, + ...props +}: CodeBlockProps) => ( + +
+
+ + {code} + + + {code} + + {children && ( +
+ {children} +
+ )} +
+
+ +); + +export type CodeBlockCopyButtonProps = ComponentProps & { + onCopy?: () => void; + onError?: (error: Error) => void; + timeout?: number; +}; + +export const CodeBlockCopyButton = ({ + onCopy, + onError, + timeout = 2000, + children, + className, + ...props +}: CodeBlockCopyButtonProps) => { + const [isCopied, setIsCopied] = useState(false); + const { code } = useContext(CodeBlockContext); + + const copyToClipboard = async () => { + if (typeof window === 'undefined' || !navigator.clipboard.writeText) { + onError?.(new Error('Clipboard API not available')); + return; + } + + try { + await navigator.clipboard.writeText(code); + setIsCopied(true); + onCopy?.(); + setTimeout(() => setIsCopied(false), timeout); + } catch (error) { + onError?.(error as Error); + } + }; + + const Icon = isCopied ? CheckIcon : CopyIcon; + + return ( + + ); +}; diff --git a/templates/next-chat-x402/src/components/ai-elements/conversation.tsx b/templates/next-chat-x402/src/components/ai-elements/conversation.tsx new file mode 100644 index 000000000..756e81c2f --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/conversation.tsx @@ -0,0 +1,97 @@ +'use client'; + +import { ArrowDownIcon } from 'lucide-react'; +import type { ComponentProps } from 'react'; +import { useCallback } from 'react'; +import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'; +import { Button } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; + +export type ConversationProps = ComponentProps; + +export const Conversation = ({ className, ...props }: ConversationProps) => ( + +); + +export type ConversationContentProps = ComponentProps< + typeof StickToBottom.Content +>; + +export const ConversationContent = ({ + className, + ...props +}: ConversationContentProps) => ( + +); + +export type ConversationEmptyStateProps = ComponentProps<'div'> & { + title?: string; + description?: string; + icon?: React.ReactNode; +}; + +export const ConversationEmptyState = ({ + className, + title = 'No messages yet', + description = 'Start a conversation to see messages here', + icon, + children, + ...props +}: ConversationEmptyStateProps) => ( +
+ {children ?? ( + <> + {icon &&
{icon}
} +
+

{title}

+ {description && ( +

{description}

+ )} +
+ + )} +
+); + +export type ConversationScrollButtonProps = ComponentProps; + +export const ConversationScrollButton = ({ + className, + ...props +}: ConversationScrollButtonProps) => { + const { isAtBottom, scrollToBottom } = useStickToBottomContext(); + + const handleScrollToBottom = useCallback(() => { + scrollToBottom(); + }, [scrollToBottom]); + + return ( + !isAtBottom && ( + + ) + ); +}; diff --git a/templates/next-chat-x402/src/components/ai-elements/image.tsx b/templates/next-chat-x402/src/components/ai-elements/image.tsx new file mode 100644 index 000000000..4f1de9477 --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/image.tsx @@ -0,0 +1,24 @@ +import type { Experimental_GeneratedImage } from 'ai'; +import { cn } from '@/lib/utils'; + +export type ImageProps = Experimental_GeneratedImage & { + className?: string; + alt?: string; +}; + +export const Image = ({ + base64, + uint8Array, + mediaType, + ...props +}: ImageProps) => ( + {props.alt} +); diff --git a/templates/next-chat-x402/src/components/ai-elements/inline-citation.tsx b/templates/next-chat-x402/src/components/ai-elements/inline-citation.tsx new file mode 100644 index 000000000..de89ef041 --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/inline-citation.tsx @@ -0,0 +1,287 @@ +'use client'; + +import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'; +import { + type ComponentProps, + createContext, + useCallback, + useContext, + useEffect, + useState, +} from 'react'; +import { Badge } from '@/components/ui/badge'; +import { + Carousel, + type CarouselApi, + CarouselContent, + CarouselItem, +} from '@/components/ui/carousel'; +import { + HoverCard, + HoverCardContent, + HoverCardTrigger, +} from '@/components/ui/hover-card'; +import { cn } from '@/lib/utils'; + +export type InlineCitationProps = ComponentProps<'span'>; + +export const InlineCitation = ({ + className, + ...props +}: InlineCitationProps) => ( + +); + +export type InlineCitationTextProps = ComponentProps<'span'>; + +export const InlineCitationText = ({ + className, + ...props +}: InlineCitationTextProps) => ( + +); + +export type InlineCitationCardProps = ComponentProps; + +export const InlineCitationCard = (props: InlineCitationCardProps) => ( + +); + +export type InlineCitationCardTriggerProps = ComponentProps & { + sources: string[]; +}; + +export const InlineCitationCardTrigger = ({ + sources, + className, + ...props +}: InlineCitationCardTriggerProps) => ( + + + {sources.length ? ( + <> + {new URL(sources[0]).hostname}{' '} + {sources.length > 1 && `+${sources.length - 1}`} + + ) : ( + 'unknown' + )} + + +); + +export type InlineCitationCardBodyProps = ComponentProps<'div'>; + +export const InlineCitationCardBody = ({ + className, + ...props +}: InlineCitationCardBodyProps) => ( + +); + +const CarouselApiContext = createContext(undefined); + +const useCarouselApi = () => { + const context = useContext(CarouselApiContext); + return context; +}; + +export type InlineCitationCarouselProps = ComponentProps; + +export const InlineCitationCarousel = ({ + className, + children, + ...props +}: InlineCitationCarouselProps) => { + const [api, setApi] = useState(); + + return ( + + + {children} + + + ); +}; + +export type InlineCitationCarouselContentProps = ComponentProps<'div'>; + +export const InlineCitationCarouselContent = ( + props: InlineCitationCarouselContentProps +) => ; + +export type InlineCitationCarouselItemProps = ComponentProps<'div'>; + +export const InlineCitationCarouselItem = ({ + className, + ...props +}: InlineCitationCarouselItemProps) => ( + +); + +export type InlineCitationCarouselHeaderProps = ComponentProps<'div'>; + +export const InlineCitationCarouselHeader = ({ + className, + ...props +}: InlineCitationCarouselHeaderProps) => ( +
+); + +export type InlineCitationCarouselIndexProps = ComponentProps<'div'>; + +export const InlineCitationCarouselIndex = ({ + children, + className, + ...props +}: InlineCitationCarouselIndexProps) => { + const api = useCarouselApi(); + const [current, setCurrent] = useState(0); + const [count, setCount] = useState(0); + + useEffect(() => { + if (!api) { + return; + } + + setCount(api.scrollSnapList().length); + setCurrent(api.selectedScrollSnap() + 1); + + api.on('select', () => { + setCurrent(api.selectedScrollSnap() + 1); + }); + }, [api]); + + return ( +
+ {children ?? `${current}/${count}`} +
+ ); +}; + +export type InlineCitationCarouselPrevProps = ComponentProps<'button'>; + +export const InlineCitationCarouselPrev = ({ + className, + ...props +}: InlineCitationCarouselPrevProps) => { + const api = useCarouselApi(); + + const handleClick = useCallback(() => { + if (api) { + api.scrollPrev(); + } + }, [api]); + + return ( + + ); +}; + +export type InlineCitationCarouselNextProps = ComponentProps<'button'>; + +export const InlineCitationCarouselNext = ({ + className, + ...props +}: InlineCitationCarouselNextProps) => { + const api = useCarouselApi(); + + const handleClick = useCallback(() => { + if (api) { + api.scrollNext(); + } + }, [api]); + + return ( + + ); +}; + +export type InlineCitationSourceProps = ComponentProps<'div'> & { + title?: string; + url?: string; + description?: string; +}; + +export const InlineCitationSource = ({ + title, + url, + description, + className, + children, + ...props +}: InlineCitationSourceProps) => ( +
+ {title && ( +

{title}

+ )} + {url && ( +

{url}

+ )} + {description && ( +

+ {description} +

+ )} + {children} +
+); + +export type InlineCitationQuoteProps = ComponentProps<'blockquote'>; + +export const InlineCitationQuote = ({ + children, + className, + ...props +}: InlineCitationQuoteProps) => ( +
+ {children} +
+); diff --git a/templates/next-chat-x402/src/components/ai-elements/loader.tsx b/templates/next-chat-x402/src/components/ai-elements/loader.tsx new file mode 100644 index 000000000..f6f568d75 --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/loader.tsx @@ -0,0 +1,96 @@ +import type { HTMLAttributes } from 'react'; +import { cn } from '@/lib/utils'; + +type LoaderIconProps = { + size?: number; +}; + +const LoaderIcon = ({ size = 16 }: LoaderIconProps) => ( + + Loader + + + + + + + + + + + + + + + + + + +); + +export type LoaderProps = HTMLAttributes & { + size?: number; +}; + +export const Loader = ({ className, size = 16, ...props }: LoaderProps) => ( +
+ +
+); diff --git a/templates/next-chat-x402/src/components/ai-elements/message.tsx b/templates/next-chat-x402/src/components/ai-elements/message.tsx new file mode 100644 index 000000000..797efaa70 --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/message.tsx @@ -0,0 +1,58 @@ +import type { UIMessage } from 'ai'; +import type { ComponentProps, HTMLAttributes } from 'react'; +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { cn } from '@/lib/utils'; + +export type MessageProps = HTMLAttributes & { + from: UIMessage['role']; +}; + +export const Message = ({ className, from, ...props }: MessageProps) => ( +
div]:max-w-[80%]', + className + )} + {...props} + /> +); + +export type MessageContentProps = HTMLAttributes; + +export const MessageContent = ({ + children, + className, + ...props +}: MessageContentProps) => ( +
+ {children} +
+); + +export type MessageAvatarProps = ComponentProps & { + src: string; + name?: string; +}; + +export const MessageAvatar = ({ + src, + name, + className, + ...props +}: MessageAvatarProps) => ( + + + {name?.slice(0, 2) || 'ME'} + +); diff --git a/templates/next-chat-x402/src/components/ai-elements/prompt-input.tsx b/templates/next-chat-x402/src/components/ai-elements/prompt-input.tsx new file mode 100644 index 000000000..f632e50f6 --- /dev/null +++ b/templates/next-chat-x402/src/components/ai-elements/prompt-input.tsx @@ -0,0 +1,230 @@ +'use client'; + +import type { ChatStatus } from 'ai'; +import { Loader2Icon, SendIcon, SquareIcon, XIcon } from 'lucide-react'; +import type { + ComponentProps, + HTMLAttributes, + KeyboardEventHandler, +} from 'react'; +import { Children } from 'react'; +import { Button } from '@/components/ui/button'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Textarea } from '@/components/ui/textarea'; +import { cn } from '@/lib/utils'; + +export type PromptInputProps = HTMLAttributes; + +export const PromptInput = ({ className, ...props }: PromptInputProps) => ( +
+); + +export type PromptInputTextareaProps = ComponentProps & { + minHeight?: number; + maxHeight?: number; +}; + +export const PromptInputTextarea = ({ + onChange, + className, + placeholder = 'What would you like to know?', + minHeight = 48, + maxHeight = 164, + ...props +}: PromptInputTextareaProps) => { + const handleKeyDown: KeyboardEventHandler = e => { + if (e.key === 'Enter') { + // Don't submit if IME composition is in progress + if (e.nativeEvent.isComposing) { + return; + } + + if (e.shiftKey) { + // Allow newline + return; + } + + // Submit on Enter (without Shift) + e.preventDefault(); + const form = e.currentTarget.form; + if (form) { + form.requestSubmit(); + } + } + }; + + return ( +