+
+ );
+};
+
+export default ChatBotDemo;
diff --git a/templates/chat-x402/src/app/_components/connect-button.tsx b/templates/chat-x402/src/app/_components/connect-button.tsx
new file mode 100644
index 000000000..72c2bfeb2
--- /dev/null
+++ b/templates/chat-x402/src/app/_components/connect-button.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+
+export function WalletConnectButton() {
+ return (
+
+
+
+ {messages.length === 0 ? (
+
+
+
+ {suggestions.map(suggestion => (
+
+
+
+ setInput(e.target.value)}
+ value={input}
+ />
+
+
+ {
+ setModel(value);
+ }}
+ value={model}
+ >
+
+
+
+ {models.map(model => (
+
+ {model.name}
+
+ ))}
+
+
+
+
+
+
+
+ {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' &&
+ {(() => {
+ if (!connected) {
+ return (
+
+ );
+ }
+
+ if (chain.unsupported) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ }}
+
+
+
+ );
+ })()}
+
+
+ );
+ }
+
+ if (isWalletConnected) {
+ return (
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {title}
+{children}
+
+ {children}
+
+);
+
+export type ActionProps = ComponentProps{tooltip}
+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) => (
+ & {
+ 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/chat-x402/src/components/ai-elements/code-block.tsx b/templates/chat-x402/src/components/ai-elements/code-block.tsx
new file mode 100644
index 000000000..1574767fb
--- /dev/null
+++ b/templates/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) => (
+
+
+);
+
+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/chat-x402/src/components/ai-elements/conversation.tsx b/templates/chat-x402/src/components/ai-elements/conversation.tsx
new file mode 100644
index 000000000..756e81c2f
--- /dev/null
+++ b/templates/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 const ConversationScrollButton = ({
+ className,
+ ...props
+}: ConversationScrollButtonProps) => {
+ const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+ const handleScrollToBottom = useCallback(() => {
+ scrollToBottom();
+ }, [scrollToBottom]);
+
+ return (
+ !isAtBottom && (
+
+ )
+ );
+};
diff --git a/templates/chat-x402/src/components/ai-elements/image.tsx b/templates/chat-x402/src/components/ai-elements/image.tsx
new file mode 100644
index 000000000..4f1de9477
--- /dev/null
+++ b/templates/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) => (
+ 
+);
diff --git a/templates/chat-x402/src/components/ai-elements/inline-citation.tsx b/templates/chat-x402/src/components/ai-elements/inline-citation.tsx
new file mode 100644
index 000000000..de89ef041
--- /dev/null
+++ b/templates/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) => (
+ & {
+ 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) => (
+ (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
+) => & {
+ size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+ & {
+ from: UIMessage['role'];
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+
div]:pb-0',
+ index === currentBranch ? 'block' : 'hidden'
+ )}
+ key={branch.key}
+ {...props}
+ >
+ {branch}
+
+ ));
+};
+
+export type BranchSelectorProps = HTMLAttributes
+
+
+
+ {code}
+
+
+ {code}
+
+ {children && (
+
+
+ {children}
+
+ )}
+
+ {children ?? (
+ <>
+ {icon &&
+);
+
+export type ConversationScrollButtonProps = ComponentProps{icon}
}
+
+
+
+ )}
+ {title}
+ {description && ( +{description}
+ )} +
+ {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 && (
+
+);
+
+export type InlineCitationQuoteProps = ComponentProps<'blockquote'>;
+
+export const InlineCitationQuote = ({
+ children,
+ className,
+ ...props
+}: InlineCitationQuoteProps) => (
+ {title}
+ )} + {url && ( +{url}
+ )} + {description && ( ++ {description} +
+ )} + {children} ++ {children} ++); diff --git a/templates/chat-x402/src/components/ai-elements/loader.tsx b/templates/chat-x402/src/components/ai-elements/loader.tsx new file mode 100644 index 000000000..f6f568d75 --- /dev/null +++ b/templates/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) => ( + +); + +export type LoaderProps = HTMLAttributes
+
+);
diff --git a/templates/chat-x402/src/components/ai-elements/message.tsx b/templates/chat-x402/src/components/ai-elements/message.tsx
new file mode 100644
index 000000000..797efaa70
--- /dev/null
+++ b/templates/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 = HTMLAttributesdiv]:max-w-[80%]',
+ className
+ )}
+ {...props}
+ />
+);
+
+export type MessageContentProps = HTMLAttributes;
+
+export const MessageContent = ({
+ children,
+ className,
+ ...props
+}: MessageContentProps) => (
+ & {
+ src: string;
+ name?: string;
+};
+
+export const MessageAvatar = ({
+ src,
+ name,
+ className,
+ ...props
+}: MessageAvatarProps) => (
+
+ {name?.slice(0, 2) || 'ME'}
+
+);
diff --git a/templates/chat-x402/src/components/ai-elements/prompt-input.tsx b/templates/chat-x402/src/components/ai-elements/prompt-input.tsx
new file mode 100644
index 000000000..f632e50f6
--- /dev/null
+++ b/templates/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 (
+
+ {children}
+
+);
+
+export type MessageAvatarProps = ComponentProps