How do I create the cards for the past outputs?

[mrakgr]

The library works well for the current prompt's response that is being streamed back to the user, but how do I deal with the old ones? I want to separate them into nicely rendered components so the user could see the old prompts and the responses. Right now, I only know how to deal with the current output.

[Prasanth2706]

`import { useState } from "react";

export default function ChatApp() { const [messages, setMessages] = useState([]); // Store past prompts & responses const [currentInput, setCurrentInput] = useState("");

const handleSend = () => { if (!currentInput.trim()) return;

// Simulate AI response (replace with actual API call)
const aiResponse = `AI Response for: "${currentInput}"`;

// Update history
setMessages([...messages, { prompt: currentInput, response: aiResponse }]);
setCurrentInput(""); // Clear input field

};

return ( <div className="p-4 max-w-lg mx-auto space-y-4"> <h2 className="text-xl font-bold">Chat History

  {/* Render past messages */}
  <div className="space-y-2">
    {messages.map((msg, index) => (
      <div key={index} className="p-3 bg-gray-100 rounded-lg">
        <p className="font-semibold">User: {msg.prompt}</p>
        <p className="text-gray-700">AI: {msg.response}</p>
      </div>
    ))}
  </div>

  {/* Input & Send Button */}
  <div className="flex gap-2">
    <input
      type="text"
      value={currentInput}
      onChange={(e) => setCurrentInput(e.target.value)}
      className="flex-grow p-2 border rounded"
      placeholder="Type your message..."
    />
    <button onClick={handleSend} className="bg-blue-500 text-white px-4 py-2 rounded">
      Send
    </button>
  </div>
</div>

); } ` ✅ Stores old prompts & responses in messages state. ✅ Renders them dynamically in a scrollable chat history. ✅ Keeps UI simple and clean.