Initial commit
This commit is contained in:
Zhongwei Li
269
templates/custom-message-renderer.tsx
Normal file
269
templates/custom-message-renderer.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
/**
|
||||
* AI SDK UI - Custom Message Renderer
|
||||
*
|
||||
* Demonstrates:
|
||||
* - Markdown rendering (react-markdown)
|
||||
* - Code syntax highlighting (react-syntax-highlighter)
|
||||
* - Custom message components
|
||||
* - Copy code button
|
||||
* - Timestamp display
|
||||
* - User avatars
|
||||
*
|
||||
* Dependencies:
|
||||
* npm install react-markdown react-syntax-highlighter
|
||||
* npm install --save-dev @types/react-syntax-highlighter
|
||||
*
|
||||
* Usage:
|
||||
* 1. Install dependencies
|
||||
* 2. Copy this component
|
||||
* 3. Use <MessageRenderer message={message} /> in your chat
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useChat } from 'ai/react';
|
||||
import { useState, FormEvent } from 'react';
|
||||
import type { Message } from 'ai';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
||||
|
||||
// Custom message renderer component
|
||||
function MessageRenderer({ message }: { message: Message }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copyCode = (code: string) => {
|
||||
navigator.clipboard.writeText(code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex ${
|
||||
message.role === 'user' ? 'justify-end' : 'justify-start'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[75%] rounded-lg p-4 ${
|
||||
message.role === 'user'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-white border shadow-sm'
|
||||
}`}
|
||||
>
|
||||
{/* Avatar & name */}
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<div
|
||||
className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
|
||||
message.role === 'user'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-200 text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{message.role === 'user' ? 'U' : 'AI'}
|
||||
</div>
|
||||
<span className="text-xs font-semibold">
|
||||
{message.role === 'user' ? 'You' : 'Assistant'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Message content with markdown */}
|
||||
<div
|
||||
className={`prose prose-sm ${
|
||||
message.role === 'user' ? 'prose-invert' : ''
|
||||
} max-w-none`}
|
||||
>
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
// Custom code block renderer
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const codeString = String(children).replace(/\n$/, '');
|
||||
|
||||
return !inline && match ? (
|
||||
<div className="relative group">
|
||||
<SyntaxHighlighter
|
||||
style={oneDark}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
className="rounded-lg"
|
||||
{...props}
|
||||
>
|
||||
{codeString}
|
||||
</SyntaxHighlighter>
|
||||
<button
|
||||
onClick={() => copyCode(codeString)}
|
||||
className="absolute top-2 right-2 px-2 py-1 text-xs bg-gray-700 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
{copied ? 'Copied!' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<code
|
||||
className={`${
|
||||
message.role === 'user'
|
||||
? 'bg-blue-600'
|
||||
: 'bg-gray-100'
|
||||
} px-1 rounded`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<div
|
||||
className={`text-xs mt-2 ${
|
||||
message.role === 'user' ? 'text-blue-100' : 'text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{new Date(message.createdAt || Date.now()).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Main chat component
|
||||
export default function ChatWithCustomRenderer() {
|
||||
const { messages, sendMessage, isLoading, error } = useChat({
|
||||
api: '/api/chat',
|
||||
});
|
||||
const [input, setInput] = useState('');
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!input.trim()) return;
|
||||
|
||||
sendMessage({ content: input });
|
||||
setInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b bg-white">
|
||||
<h1 className="text-2xl font-bold">Custom Message Renderer</h1>
|
||||
<p className="text-sm text-gray-600">
|
||||
With markdown, syntax highlighting, and copy buttons
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-4 bg-gray-50 space-y-4">
|
||||
{messages.length === 0 && (
|
||||
<div className="flex items-center justify-center h-full text-center">
|
||||
<div>
|
||||
<div className="text-6xl mb-4">✨</div>
|
||||
<h2 className="text-xl font-semibold text-gray-700">
|
||||
Try asking for code examples
|
||||
</h2>
|
||||
<p className="text-gray-500 mt-2">
|
||||
Messages will render with markdown and syntax highlighting
|
||||
</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
{[
|
||||
'Write a Python function to sort a list',
|
||||
'Explain React hooks with code examples',
|
||||
'Show me a TypeScript interface example',
|
||||
].map((suggestion, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setInput(suggestion)}
|
||||
className="block w-full p-2 text-left border rounded hover:bg-white"
|
||||
>
|
||||
{suggestion}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.map((message) => (
|
||||
<MessageRenderer key={message.id} message={message} />
|
||||
))}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-white border p-3 rounded-lg">
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-100" />
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="p-4 bg-red-50 border-t border-red-200 text-red-700">
|
||||
<strong>Error:</strong> {error.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input */}
|
||||
<form onSubmit={handleSubmit} className="p-4 border-t bg-white">
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Ask for code examples..."
|
||||
disabled={isLoading}
|
||||
className="flex-1 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !input.trim()}
|
||||
className="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:bg-gray-300 disabled:cursor-not-allowed"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Simpler Version (without react-markdown)
|
||||
// ============================================================================
|
||||
|
||||
/*
|
||||
// Simple markdown parsing without external dependencies
|
||||
function SimpleMarkdownRenderer({ content }: { content: string }) {
|
||||
// Basic markdown parsing
|
||||
const parseMarkdown = (text: string) => {
|
||||
// Code blocks
|
||||
text = text.replace(/```(\w+)?\n([\s\S]*?)```/g, (_, lang, code) => {
|
||||
return `<pre><code class="language-${lang || 'text'}">${code}</code></pre>`;
|
||||
});
|
||||
|
||||
// Inline code
|
||||
text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
|
||||
|
||||
// Bold
|
||||
text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
||||
|
||||
// Italic
|
||||
text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
|
||||
|
||||
// Line breaks
|
||||
text = text.replace(/\n/g, '<br/>');
|
||||
|
||||
return text;
|
||||
};
|
||||
|
||||
return (
|
||||
<div dangerouslySetInnerHTML={{ __html: parseMarkdown(content) }} />
|
||||
);
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user