opt: record modify content by onInput

app/components/home.tsx

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

app/store/app.ts

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