Add AI chat feature

components/chat/chat-messages.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils";
+import { UIMessage } from "ai";
+
+interface ChatMessagesProps {
+  messages: UIMessage[];
+}
+
+export function ChatMessages({ messages }: ChatMessagesProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      {messages.map((message, index) => (
+        <div
+          key={index}
+          className={cn(
+            "bg-primary text-primary-foreground px-3 py-2 rounded-lg whitespace-pre-wrap wrap-break-word break-all",
+            message.role === "user"
+              ? "self-end bg-primary text-primary-foreground"
+              : "self-start bg-accent text-accent-foreground",
+          )}
+        >
+          {message.parts.map((part, index) => {
+            if (part.type === "text") {
+              return <span key={index}>{part.text}</span>;
+            }
+
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}