From b52925500676efa4909510babf93a0781baff1a3 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 12 Nov 2024 19:15:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81API=E5=92=8C=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E9=9B=86=E6=88=90OpenAI=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/chat/route.ts       | 20 ++++++++++++++++++
 src/components/chat-support.tsx | 36 +++++++++++++++++++++++++--------
 2 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 src/app/api/chat/route.ts

diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
new file mode 100644
index 0000000..4a59e6b
--- /dev/null
+++ b/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();
+}
diff --git a/src/components/chat-support.tsx b/src/components/chat-support.tsx
index 106365e..0fb0e13 100644
--- a/src/components/chat-support.tsx
+++ b/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>
   );