Initial commit

2025-11-30 08:23:53 +08:00
commit caa3746d36
21 changed files with 4452 additions and 0 deletions
--- a/templates/use-chat-basic.tsx
+++ b/templates/use-chat-basic.tsx
@@ -0,0 +1,133 @@
+/**
+ * AI SDK UI - Basic Chat Component (v5)
+ *
+ * Demonstrates:
+ * - useChat hook with v5 manual input management
+ * - Streaming chat messages
+ * - Loading states
+ * - Error handling
+ * - Auto-scroll to latest message
+ *
+ * CRITICAL v5 Change: useChat NO LONGER manages input state!
+ * You must manually manage input with useState.
+ *
+ * Usage:
+ * 1. Copy this component to your app
+ * 2. Create API route (see nextjs-api-route.ts)
+ * 3. Customize styling as needed
+ */
+
+'use client';
+
+import { useChat } from 'ai/react';
+import { useState, FormEvent, useRef, useEffect } from 'react';
+
+export default function ChatBasic() {
+  // useChat hook - v5 style
+  const { messages, sendMessage, isLoading, error, stop } = useChat({
+    api: '/api/chat',
+  });
+
+  // Manual input management (v5 requires this!)
+  const [input, setInput] = useState('');
+
+  // Auto-scroll to bottom
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Handle form submission
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!input.trim()) return;
+
+    // v5: Use sendMessage instead of append
+    sendMessage({ content: input });
+    setInput('');
+  };
+
+  return (
+    <div className="flex flex-col h-screen max-w-2xl mx-auto">
+      {/* Header */}
+      <div className="p-4 border-b">
+        <h1 className="text-2xl font-bold">AI Chat</h1>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`flex ${
+              message.role === 'user' ? 'justify-end' : 'justify-start'
+            }`}
+          >
+            <div
+              className={`max-w-[70%] p-3 rounded-lg ${
+                message.role === 'user'
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-200 text-gray-900'
+              }`}
+            >
+              {message.content}
+            </div>
+          </div>
+        ))}
+
+        {/* Loading indicator */}
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="bg-gray-200 p-3 rounded-lg">
+              <div className="flex space-x-2">
+                <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" />
+                <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce delay-100" />
+                <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce delay-200" />
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Error message */}
+      {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">
+        <div className="flex space-x-2">
+          <input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type a message..."
+            disabled={isLoading}
+            className="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
+          />
+          {isLoading ? (
+            <button
+              type="button"
+              onClick={stop}
+              className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
+            >
+              Stop
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={!input.trim()}
+              className="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:bg-gray-300 disabled:cursor-not-allowed hover:bg-blue-600"
+            >
+              Send
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}