split message.tsx

src/chatbox.tsx

@@ -1,6 +1,7 @@
 import { useState } from "preact/hooks";
 import type { ChatStore } from "./app";
 import ChatGPT, { ChunkMessage } from "./chatgpt";
+import Message from "./message";
 import Settings from "./settings";
 
 export default function ChatBOX(props: {
@@ -184,51 +185,13 @@ export default function ChatBOX(props: {
             暂无历史对话记录
           </p>
         )}
-        {chatStore.history.map((chat, i) => {
+        {chatStore.history.map((_, messageIndex) => (
-          const pClassName =
+          <Message
-            chat.role === "assistant"
+            chatStore={chatStore}
-              ? "p-2 rounded relative bg-white my-2 text-left dark:bg-gray-700 dark:text-white"
+            setChatStore={setChatStore}
-              : "p-2 rounded relative bg-green-400 my-2 text-right";
+            messageIndex={messageIndex}
-          const iconClassName =
+          />
-            chat.role === "user"
-              ? "absolute bottom-0 left-0"
-              : "absolute bottom-0 right-0";
-          const DeleteIcon = () => (
-            <button
-              className={iconClassName}
-              onClick={() => {
-                if (
-                  confirm(
-                    `Are you sure to delete this message?\n${chat.content.slice(
-                      0,
-                      39
-                    )}...`
-                  )
-                ) {
-                  chatStore.history.splice(i, 1);
-                  chatStore.postBeginIndex = Math.max(
-                    chatStore.postBeginIndex - 1,
-                    0
-                  );
-                  setChatStore({ ...chatStore });
-                }
-              }}
-            >
-              🗑️
-            </button>
-          );
-          return (
-            <p className={pClassName}>
-              {chat.content
-                .split("\n")
-                .filter((line) => line)
-                .map((line) => (
-                  <p className="my-1">{line}</p>
         ))}
-              <DeleteIcon />
-            </p>
-          );
-        })}
         {showGenerating && (
           <p className="p-2 my-2 animate-pulse dark:text-white">
             {generatingMessage

src/message.tsx

@@ -0,0 +1,51 @@
+import { ChatStore } from "./app";
+
+interface Props {
+  messageIndex: number;
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+}
+export default function Message(props: Props) {
+  const { chatStore, messageIndex, setChatStore } = props;
+  const chat = chatStore.history[messageIndex];
+  const pClassName =
+    chat.role === "assistant"
+      ? "p-2 rounded relative bg-white my-2 text-left dark:bg-gray-700 dark:text-white"
+      : "p-2 rounded relative bg-green-400 my-2 text-right";
+  const iconClassName =
+    chat.role === "user"
+      ? "absolute bottom-0 left-0"
+      : "absolute bottom-0 right-0";
+  const DeleteIcon = () => (
+    <button
+      className={iconClassName}
+      onClick={() => {
+        if (
+          confirm(
+            `Are you sure to delete this message?\n${chat.content.slice(
+              0,
+              39
+            )}...`
+          )
+        ) {
+          chatStore.history.splice(messageIndex, 1);
+          chatStore.postBeginIndex = Math.max(chatStore.postBeginIndex - 1, 0);
+          setChatStore({ ...chatStore });
+        }
+      }}
+    >
+      🗑️
+    </button>
+  );
+  return (
+    <p className={pClassName}>
+      {chat.content
+        .split("\n")
+        .filter((line) => line)
+        .map((line) => (
+          <p className="my-1">{line}</p>
+        ))}
+      <DeleteIcon />
+    </p>
+  );
+}