From 8a39fd5d5868f1e32e24e84be7e52a693946bec1 Mon Sep 17 00:00:00 2001 From: Stan Ke <156306548@qq.com> Date: Tue, 14 May 2024 10:21:31 +0800 Subject: [PATCH] Add chat bubble --- app/chat/page.tsx | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/app/chat/page.tsx b/app/chat/page.tsx index 645b049..6392c32 100644 --- a/app/chat/page.tsx +++ b/app/chat/page.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import Siderbar from "../components/Siderbar"; -import { OpenAIChatMessage } from "@/lib/ModelSetting"; +import { OpenAIChatMessage, UserMessageContentPart } from "@/lib/ModelSetting"; import OpenAI from "openai"; const initialAgents:OpenAIChatMessage[] = [ @@ -10,7 +10,8 @@ const initialAgents:OpenAIChatMessage[] = [ role: "system", name: "GPT Prompt builder", content: - 'Read all of the instructions below and once you understand them say "Shall we begin:" I want you to become my Prompt Creator. Your goal is to help me craft the best possible prompt for my needs. The prompt will be used by you, ChatGPT. You will follow the following process: Your first response will be to ask me what the prompt should be about. I will provide my answer, but we will need to improve it through continual iterations by going through the next steps. Based on my input, you will generate 3 sections. Revised Prompt (provide your rewritten prompt. it should be clear, concise, and easily understood by you) Suggestions (provide 3 suggestions on what details to include in the prompt to improve it) Questions (ask the 3 most relevant questions pertaining to what additional information is needed from me to improve the prompt) At the end of these sections give me a reminder of my options which are: Option 1: Read the output and provide more info or answer one or more of the questions Option 2: Type "Use this prompt" and I will submit this as a query for you Option 3: Type "Restart" to restart this process from the beginning Option 4: Type "Quit" to end this script and go back to a regular ChatGPT session If I type "Option 2", "2" or "Use this prompt" then we have finsihed and you should use the Revised Prompt as a prompt to generate my request If I type "option 3", "3" or "Restart" then forget the latest Revised Prompt and restart this process If I type "Option 4", "4" or "Quit" then finish this process and revert back to your general mode of operation We will continue this iterative process with me providing additional information to you and you updating the prompt in the Revised Prompt section until it is complete.', + 'Read all of the instructions below and once you understand them say "Shall we begin:" I want you to become my Prompt Creator. Your goal is to help me craft the best possible prompt for my needs. The prompt will be used by you, ChatGPT. You will follow the following process: Your first response will be to ask me what the prompt should be about. I will provide my answer, but we will need to improve it through continual iterations by going through the next steps. Based on my input, you will generate 3 sections. Revised Prompt (provide your rewritten prompt. it should be clear, concise, and easily understood by you) Suggestions (provide 3 suggestions on what details to include in the prompt to improve it) Questions' + + '(ask the 3 most relevant questions pertaining to what additional information is needed from me to improve the prompt) At the end of these sections give me a reminder of my options which are: Option 1: Read the output and provide more info or answer one or more of the questions Option 2: Type "Use this prompt" and I will submit this as a query for you Option 3: Type "Restart" to restart this process from the beginning Option 4: Type "Quit" to end this script and go back to a regular ChatGPT session If I type "Option 2", "2" or "Use this prompt" then we have finsihed and you should use the Revised Prompt as a prompt to generate my request If I type "option 3", "3" or "Restart" then forget the latest Revised Prompt and restart this process If I type "Option 4", "4" or "Quit" then finish this process and revert back to your general mode of operation We will continue this iterative process with me providing additional information to you and you updating the prompt in the Revised Prompt section until it is complete.', }, { role: "system", @@ -19,23 +20,24 @@ const initialAgents:OpenAIChatMessage[] = [ "I really enjoyed reading To Kill a Mockingbird, could you recommend me a book that is similar and tell me why?", }, ]; - + const Chat = () => { const [message, setMessage] = useState("Hi"); - const [selectedAgent, setSelectedAgent] = useState(initialAgents[0]); - const [conversations, setConversations] = useState(initialAgents); + const [selectedAgent, setSelectedAgent] = useState(initialAgents[0]); + const [conversations, setConversations] = useState(initialAgents); + let messageId = 0; //Tod // Function to handle sending a message const sendMessage = async () => { - // Add user message to conversations + const log = document.getElementById('chat-log'); + if (message.trim()) { setConversations([...conversations, { role: "user", content: message }]); // Call API route and add AI message to conversations - //const response = await fetch('/api/chat/openai', { - const response = await fetch("http://localhost:3000/api/chat/openai", { + const response = await fetch("/api/chat/openai", { method: "POST", body: JSON.stringify({ message }), }); @@ -43,13 +45,11 @@ const Chat = () => { if (data) { setConversations([ ...conversations, - { role: "assistant", content: "4" }, + { role: "assistant", content: data}, ]); } - // Reset the message input setMessage(""); - }; } // Message input handler @@ -77,7 +77,7 @@ const Chat = () => { className="flex items-center gap-2 p-2" >
- asdf + Agent 1
@@ -94,17 +94,22 @@ const Chat = () => {
-
+
+
{conversations.map((text, index) => ( -
- {text.content} +
+ {Array.isArray(text.content) + ? text.content.map((part: UserMessageContentPart, partIndex) => ( + {part.text} + )) + : text.content}
))} +
setMessage(e.target.value)} className="flex-1 p-2 border-2 border-gray-200 rounded-md" placeholder="Type your message..."