xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 07:36:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

opt: record modify content by onInput

Browse Source
This commit is contained in:
RugerMc 2023-04-01 22:33:05 +08:00
parent e1684b3014
commit 232630d005
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/home.tsx
View File

@ -191,12 +191,6 @@ export function Chat(props: {
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
const messageInputRefs = useRef<HTMLDivElement[]>([]); const messageInputRefs = useRef<HTMLDivElement[]>([]);
// avoid rendered more hooks error
const setMessageInputRef = (element: HTMLDivElement | null, index: number) => {
if (element) {
messageInputRefs.current[index] = element;
}
};
const [userInput, setUserInput] = useState(""); const [userInput, setUserInput] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { submitKey, shouldSubmit } = useSubmitHandler(); const { submitKey, shouldSubmit } = useSubmitHandler();
@ -295,12 +289,12 @@ export function Chat(props: {
} }
}; };
const confirmEdit = (index: number, content: string) => { const confirmEdit = (index: number) => {
chatStore.onConfirmEdit(index, content); chatStore.onConfirmEdit(index);
} }
const cancelEdit = (index: Message) => { const cancelEdit = (message: Message) => {
chatStore.onCancelEdit(index); chatStore.onCancelEdit(message);
} }
const onEdit = (message: Message) => { const onEdit = (message: Message) => {
@ -321,7 +315,8 @@ export function Chat(props: {
content: "……", content: "……",
date: new Date().toLocaleString(), date: new Date().toLocaleString(),
preview: true, preview: true,
isEditing: false isEditing: false,
editingText: "",
}, },
] ]
: [], : [],
@ -334,7 +329,8 @@ export function Chat(props: {
content: userInput, content: userInput,
date: new Date().toLocaleString(), date: new Date().toLocaleString(),
preview: true, preview: true,
isEditing: false isEditing: false,
editingText: "",
}, },
] ]
: [], : [],
@ -478,7 +474,9 @@ export function Chat(props: {
{message.isEditing ? ( {message.isEditing ? (
<div <div
key={i} key={i}
ref={(element) => setMessageInputRef(element, i)} onInput={(e) => {
message.editingText = e.currentTarget.textContent ?? ""
}}
contentEditable={true} contentEditable={true}
suppressContentEditableWarning={true} suppressContentEditableWarning={true}
style={{ outline: "0px solid transparent"}} style={{ outline: "0px solid transparent"}}
@ -512,7 +510,7 @@ export function Chat(props: {
<div style={{display: "flex"}}> <div style={{display: "flex"}}>
<div <div
className={styles["chat-message-action-edit"]} className={styles["chat-message-action-edit"]}
onClick={() => confirmEdit(i, messageInputRefs.current[i].innerText)}> onClick={() => confirmEdit(i)}>
{Locale.Chat.Actions.Confirm} {Locale.Chat.Actions.Confirm}
</div> </div>

22
app/store/app.ts
View File

@ -15,6 +15,7 @@ export type Message = ChatCompletionResponseMessage & {
date: string; date: string;
streaming?: boolean; streaming?: boolean;
isEditing: boolean; isEditing: boolean;
editingText: string;
}; };
export enum SubmitKey { export enum SubmitKey {
@ -193,7 +194,7 @@ interface ChatStore {
currentSession: () => ChatSession; currentSession: () => ChatSession;
onNewMessage: (message: Message) => void; onNewMessage: (message: Message) => void;
onUserEdit: (message: Message) => void; onUserEdit: (message: Message) => void;
onConfirmEdit: (index: number, content: string) => void; onConfirmEdit: (index: number) => void;
onCancelEdit: (message: Message) => void; onCancelEdit: (message: Message) => void;
onUserInput: (content: string) => Promise<void>; onUserInput: (content: string) => Promise<void>;
summarizeSession: () => void; summarizeSession: () => void;
@ -304,16 +305,20 @@ export const useChatStore = create<ChatStore>()(
onUserEdit(message) { onUserEdit(message) {
message.isEditing = true; message.isEditing = true;
message.editingText = message.content;
set(() => ({})) set(() => ({}))
}, },
onConfirmEdit(index, content) { onConfirmEdit(index) {
const session = get().currentSession(); const session = get().currentSession();
session.messages = session.messages.slice(0, index) const content = session.messages[index].editingText;
get().onUserInput(content) session.messages = session.messages.slice(0, index);
get().onUserInput(content);
}, },
onCancelEdit(message) { onCancelEdit(message) {
message.isEditing = false; message.isEditing = false;
message.editingText = "";
set(() => ({})) set(() => ({}))
}, },
async onUserInput(content) { async onUserInput(content) {
@ -321,7 +326,8 @@ export const useChatStore = create<ChatStore>()(
role: "user", role: "user",
content, content,
date: new Date().toLocaleString(), date: new Date().toLocaleString(),
isEditing: false isEditing: false,
editingText: ""
}; };
const botMessage: Message = { const botMessage: Message = {
@ -329,7 +335,8 @@ export const useChatStore = create<ChatStore>()(
role: "assistant", role: "assistant",
date: new Date().toLocaleString(), date: new Date().toLocaleString(),
streaming: true, streaming: true,
isEditing: false isEditing: false,
editingText: ""
}; };
// get recent messages // get recent messages
@ -465,7 +472,8 @@ export const useChatStore = create<ChatStore>()(
role: "system", role: "system",
content: Locale.Store.Prompt.Summarize, content: Locale.Store.Prompt.Summarize,
date: "", date: "",
isEditing: false isEditing: false,
editingText: ""
}), }),
{ {
filterBot: false, filterBot: false,