ประวัติการแชทที่คงอยู่ด้วย LangChain &Upstash Redis

"use client";
 
import { useChat } from "ai/react";
 
export default function Home() {
 const { messages, input, handleInputChange, handleSubmit } = useChat();
 
 return (
 <main>
 <form onSubmit={handleSubmit}>
 <input
 value={input}
 onChange={handleInputChange}
 placeholder="Enter a message..."
 />
 <button type="submit">Send</button>
 </form>
 </main>
 );
}

ภายใน 186 hook จะเพิ่ม 199 โดยอัตโนมัติ เป็น 209 เมื่อ 212 ถูกเรียก ซึ่งทำให้เกิดการเรนเดอร์ใหม่ ดังนั้นเราจึงไม่ต้องกังวลกับการอัปเดต UI ด้วยตนเอง นอกจากนี้ยังจะล้างช่องป้อนข้อมูลและทริกเกอร์การเรียก API ไปยังตำแหน่งข้อมูลที่ระบุ โดยค่าเริ่มต้น นี่คือ 226 .

สุดท้ายนี้ มาแสดงผล 236 กัน เหนือแบบฟอร์มของเรา:

<main>
 <section>
 {messages.map((message) => (
 <p key={message.id}>{message.content}</p>
 ))}
 </section>
 
 {/* snip */}
</main>

การสร้างจุดสิ้นสุด API

เราสามารถเริ่มต้นด้วยการสร้าง 248 ไฟล์เพื่อเก็บปลายทางของเรา Next.js ใช้การกำหนดเส้นทางตามไฟล์สำหรับตำแหน่งข้อมูล API และหน้าต่างๆ ด้วยเหตุนี้โครงสร้างโฟลเดอร์สำหรับไฟล์ใหม่นี้จึงตรงกับตำแหน่งข้อมูลเริ่มต้น 250 จากเมื่อก่อน

เนื่องจากเราใช้ Upstash Redis ตำแหน่งข้อมูลของเราจึงเข้ากันได้กับ Edge เราสามารถระบุสิ่งนี้ได้โดยส่งออก 269 จากจุดสิ้นสุดของเรา ในตัวปลายทางเอง เราสามารถดึงข้อมูล 275 ได้ ฟิลด์ที่ 288 เบ็ดมีประชากรสำหรับเรา สิ่งนี้ทำให้เราสามารถส่งข้อความล่าสุดไปยัง LangChain:

import { type NextRequest } from "next/server";
 
import { LangChainStream, StreamingTextResponse } from "ai";
 
export const runtime = "edge";
 
export async function POST(req: NextRequest) {
 const { messages } = await req.json();
 const { stream, handlers } = LangChainStream();
 
 const latestMessage = messages[messages.length - 1];
 
 return new StreamingTextResponse(stream);
}

ชอบ 291 จากเมื่อก่อน 305 ยังส่งคืนคุณสมบัติบางอย่างที่เราสามารถทำลายโครงสร้างได้

• 319 คือ 328 ซึ่งในที่สุดจะประกอบไปด้วยผลลัพธ์ของกระบวนการ LangChain
• 336 เป็นออบเจ็กต์ที่มีฟังก์ชันเรียกกลับ LLM ที่สามารถส่งผ่านไปยัง LangChain ได้

import { Redis } from "@upstash/redis";
import { ConversationChain } from "langchain/chains";
import { ChatOpenAI } from "langchain/chat_models/openai";
import { BufferMemory } from "langchain/memory";
import { UpstashRedisChatMessageHistory } from "langchain/stores/message/upstash_redis";

// snip
const latestMessage = messages[messages.length - 1];
 
const memory = new BufferMemory({
 chatHistory: new UpstashRedisChatMessageHistory({
 sessionId: new Date().toLocaleDateString(),
 client: Redis.fromEnv(),
 }),
});
 
const model = new ChatOpenAI({
 modelName: "gpt-3.5-turbo",
 streaming: true,
});
 
const chain = new ConversationChain({ llm: model, memory });
// snip

// snip
const chain = new ConversationChain({ llm: model, memory });
 
chain.call({
 input: latestMessage.content,
 callbacks: [handlers],
});
 
return new StreamingTextResponse(stream);
// snip