feat: 添加聊天支持API和组件，集成OpenAI模型

src/app/api/chat/route.ts

@@ -0,0 +1,20 @@
+import { streamText } from "ai";
+import { createOpenAI } from "@ai-sdk/openai";
+
+const openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY || "",
+  baseURL: process.env.OPENAI_BASE_URL || "",
+});
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = await streamText({
+    model: openai("gpt-4o-mini"),
+    messages,
+  });
+
+  return result.toDataStreamResponse();
+}

src/components/chat-support.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   ChatBubble,
   ChatBubbleAvatar,
@@ -13,8 +15,10 @@ import {
 import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 import { Button } from "./ui/button";
 import { Send } from "lucide-react";
+import { useChat } from "ai/react";
 
 export default function ChatSupport() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat();
   return (
     <ExpandableChat size="lg" position="bottom-right">
       <ExpandableChatHeader className="flex-col text-center justify-center">
@@ -27,17 +31,33 @@ export default function ChatSupport() {
       </ExpandableChatHeader>
       <ExpandableChatBody>
         <ChatMessageList>
-          <ChatBubble>
-            <ChatBubbleAvatar />
-            <ChatBubbleMessage>{/* {message.content} */}</ChatBubbleMessage>
-          </ChatBubble>
+          {messages.map((message, index) => (
+            <ChatBubble
+              key={index}
+              variant={message.role == "user" ? "sent" : "received"}
+            >
+              <ChatBubbleAvatar
+                src=""
+                fallback={message.role == "user" ? "US" : "AI"}
+              />
+              <ChatBubbleMessage
+                variant={message.role == "user" ? "sent" : "received"}
+              >
+                {message.content}
+              </ChatBubbleMessage>
+            </ChatBubble>
+          ))}
         </ChatMessageList>
       </ExpandableChatBody>
       <ExpandableChatFooter>
-        <ChatInput />
-        <Button type="submit" size="icon">
-          <Send className="size-4" />
-        </Button>
+        <form onSubmit={handleSubmit}>
+          <div className="flex items-center justify-between gap-2">
+            <ChatInput value={input} onChange={handleInputChange} />
+            <Button type="submit" size="icon">
+              <Send className="size-4" />
+            </Button>
+          </div>
+        </form>
       </ExpandableChatFooter>
     </ExpandableChat>
   );