*rewrite* store chat in key-value schema

src/app.tsx

@@ -39,35 +39,49 @@ const newChatStore = (
 
 const STORAGE_NAME = "chatgpt-api-web";
 const STORAGE_NAME_SELECTED = `${STORAGE_NAME}-selected`;
+const STORAGE_NAME_INDEXES = `${STORAGE_NAME}-indexes`;
 
 export function App() {
-  // init all chat store
+  // init indexes
-  const initAllChatStore: ChatStore[] = JSON.parse(
+  const initAllChatStoreIndexes: number[] = JSON.parse(
-    localStorage.getItem(STORAGE_NAME) || "[]"
+    localStorage.getItem(STORAGE_NAME_INDEXES) ?? "[0]"
   );
-  if (initAllChatStore.length === 0) {
+  const [allChatStoreIndexes, setAllChatStoreIndexes] = useState(
-    initAllChatStore.push(newChatStore());
+    initAllChatStoreIndexes
-    localStorage.setItem(STORAGE_NAME, JSON.stringify(initAllChatStore));
+  );
-  }
+  useEffect(() => {
-  const [allChatStore, setAllChatStore] = useState(initAllChatStore);
+    if (allChatStoreIndexes.length === 0) allChatStoreIndexes.push(0);
+    console.log("saved all chat store indexes", allChatStoreIndexes);
+    localStorage.setItem(
+      STORAGE_NAME_INDEXES,
+      JSON.stringify(allChatStoreIndexes)
+    );
+  }, [allChatStoreIndexes]);
 
+  // init selected index
   const [selectedChatIndex, setSelectedChatIndex] = useState(
     parseInt(localStorage.getItem(STORAGE_NAME_SELECTED) ?? "0")
   );
   useEffect(() => {
+    console.log("set selected chat index", selectedChatIndex);
     localStorage.setItem(STORAGE_NAME_SELECTED, `${selectedChatIndex}`);
   }, [selectedChatIndex]);
-  const chatStore = allChatStore[selectedChatIndex];
 
-  const setChatStore = (cs: ChatStore) => {
+  const getChatStoreByIndex = (index: number): ChatStore => {
-    allChatStore[selectedChatIndex] = cs;
+    const key = `${STORAGE_NAME}-${index}`;
-    setAllChatStore([...allChatStore]);
+    const val = localStorage.getItem(key);
+    if (val === null) return newChatStore();
+    return JSON.parse(val) as ChatStore;
   };
 
-  useEffect(() => {
+  const chatStore = getChatStoreByIndex(selectedChatIndex);
-    console.log("saved", allChatStore);
+  const setChatStore = (cs: ChatStore) => {
-    localStorage.setItem(STORAGE_NAME, JSON.stringify(allChatStore));
+    console.log("saved chat", selectedChatIndex, chatStore);
-  }, [allChatStore]);
+    localStorage.setItem(
+      `${STORAGE_NAME}-${selectedChatIndex}`,
+      JSON.stringify(chatStore)
+    );
+  };
 
   return (
     <div className="flex text-sm h-screen bg-slate-200">
@@ -76,27 +90,32 @@ export function App() {
           <button
             className="bg-violet-300 p-1 rounded hover:bg-violet-400"
             onClick={() => {
-              allChatStore.push(
+              const max = Math.max(...allChatStoreIndexes);
-                newChatStore(
+              const next = max + 1;
-                  allChatStore[selectedChatIndex].apiKey,
+              localStorage.setItem(
-                  allChatStore[selectedChatIndex].systemMessageContent,
+                `${STORAGE_NAME}-${next}`,
-                  allChatStore[selectedChatIndex].apiEndpoint,
+                JSON.stringify(
-                  allChatStore[selectedChatIndex].streamMode
+                  newChatStore(
+                    chatStore.apiKey,
+                    chatStore.systemMessageContent,
+                    chatStore.apiEndpoint,
+                    chatStore.streamMode
+                  )
                 )
               );
-              setAllChatStore([...allChatStore]);
+              allChatStoreIndexes.push(next);
-              setSelectedChatIndex(allChatStore.length - 1);
+              setAllChatStoreIndexes([...allChatStoreIndexes]);
+              setSelectedChatIndex(next);
             }}
           >
             NEW
           </button>
           <ul>
-            {allChatStore
+            {allChatStoreIndexes
               .slice()
               .reverse()
-              .map((cs, _i) => {
+              .map((i) => {
                 // reverse
-                const i = allChatStore.length - _i - 1;
                 return (
                   <li>
                     <button
@@ -119,26 +138,29 @@ export function App() {
           onClick={() => {
             if (!confirm("Are you sure you want to delete this chat history?"))
               return;
-            const oldAPIkey = allChatStore[selectedChatIndex].apiKey;
+            localStorage.removeItem(`${STORAGE_NAME}-${selectedChatIndex}`);
-            const oldSystemMessageContent =
+            const newAllChatStoreIndexes = [
-              allChatStore[selectedChatIndex].systemMessageContent;
+              ...allChatStoreIndexes.filter((v) => v !== selectedChatIndex),
-            const oldAPIEndpoint = allChatStore[selectedChatIndex].apiEndpoint;
+            ];
-            const oldMode = allChatStore[selectedChatIndex].streamMode;
+
-            allChatStore.splice(selectedChatIndex, 1);
+            if (newAllChatStoreIndexes.length === 0) {
-            if (allChatStore.length === 0) {
+              newAllChatStoreIndexes.push(0);
-              allChatStore.push(
-                newChatStore(
-                  getDefaultParams("api", oldAPIkey),
-                  getDefaultParams("sys", oldSystemMessageContent),
-                  getDefaultParams("api", oldAPIEndpoint),
-                  getDefaultParams("mode", oldMode)
-                )
-              );
-              setSelectedChatIndex(0);
-            } else {
-              setSelectedChatIndex(Math.max(selectedChatIndex - 1, 0));
             }
-            setAllChatStore([...allChatStore]);
+            setChatStore(
+              newChatStore(
+                chatStore.apiKey,
+                chatStore.systemMessageContent,
+                chatStore.apiEndpoint,
+                chatStore.streamMode
+              )
+            );
+
+            // find nex selected chat index
+            const next = newAllChatStoreIndexes[0];
+            console.log("next is", next);
+            setSelectedChatIndex(next);
+
+            setAllChatStoreIndexes([...newAllChatStoreIndexes]);
           }}
         >
           DEL