Merge pull request #80 from animalnots/dev

v1.15.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "better-chatgpt",
   "private": true,
-  "version": "1.14.0",
+  "version": "1.15.0",
   "type": "module",
   "homepage": "./",
   "main": "electron/index.cjs",

public/locales/en/migration.json

@@ -0,0 +1,9 @@
+{
+  "migration": {
+    "confirmTitle": "Confirm Migration",
+    "confirmMessage": "If you are experiencing issues because your messages are in an old format, running this migration will update them to the latest format. This can help fix problems and improve your experience. Do you want to proceed?",
+    "resetVersionButton": "Reset Version and Migrate",
+    "resetVersionDescription": "This will reset the version to 8 and trigger migrations.",
+    "noPersistedState": "No saved data found. Unable to reset version."
+  }
+}

src/components/Chat/ChatContent/Message/View/ContentView.tsx

@@ -119,9 +119,9 @@ const ContentView = memo(
     const handleCloseZoom = () => {
       setZoomedImage(null);
     };
-    const validImageContents = content
-      .slice(1)
-      .filter(isImageContent) as ImageContentInterface[];
+    const validImageContents = Array.isArray(content)
+    ? (content.slice(1).filter(isImageContent) as ImageContentInterface[])
+    : [];
     return (
       <>
         <div className='markdown prose w-full md:max-w-full break-words dark:prose-invert dark share-gpt-message'>

src/components/Chat/ChatContent/Message/View/EditView.tsx

@@ -160,7 +160,7 @@ const EditView = ({
   };
   const handleSave = () => {
     const hasTextContent = (_content[0] as TextContentInterface).text !== '';
-    const hasImageContent = _content.some(
+    const hasImageContent = Array.isArray(_content) && _content.some(
       (content) => content.type === 'image_url'
     );
 
@@ -227,7 +227,7 @@ const EditView = ({
   const { handleSubmit } = useSubmit();
   const handleGenerate = () => {
     const hasTextContent = (_content[0] as TextContentInterface).text !== '';
-    const hasImageContent = _content.some(
+    const hasImageContent = Array.isArray(_content) && _content.some(
       (content) => content.type === 'image_url'
     );
 

src/components/SettingsMenu/MigrationButton.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import PopupModal from '@components/PopupModal';
+
+const MigrationButton = () => {
+  const { t } = useTranslation(['main', 'migration'], { useSuspense: false });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleMigration = () => {
+    const storageKey = 'free-chat-gpt';
+    const persistedStateJSON = localStorage.getItem(storageKey);
+
+    if (persistedStateJSON) {
+      const persistedState = JSON.parse(persistedStateJSON);
+
+      // Set the version to the desired number (e.g., 8 by default)
+      persistedState.version = 8;
+
+      // Save it back to localStorage
+      localStorage.setItem(storageKey, JSON.stringify(persistedState));
+
+      // Reload the page to re-initialize the store and trigger migrations
+      window.location.reload();
+    } else {
+      console.error('No persisted state found');
+      alert(
+        t('migration.noPersistedState', {
+          defaultValue: 'No persisted state found. Unable to reset version.',ns: 'migration'
+        }) as string
+      );
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center mt-4">
+      <button
+        className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600"
+        onClick={() => setIsModalOpen(true)}
+      >
+        {t('migration.resetVersionButton', {
+          defaultValue: 'Reset Version and Migrate',ns: 'migration'
+        }) as string}
+      </button>
+      <p className="text-sm text-gray-500 mt-2">
+        {t('migration.resetVersionDescription', {
+          defaultValue: 'This will reset the version to 8 and trigger migrations.',ns: 'migration'
+        }) as string}
+      </p>
+
+      {/* Use PopupModal with built-in buttons */}
+      {isModalOpen && (
+        <PopupModal
+          title={
+            t('migration.confirmTitle', {
+              defaultValue: 'Confirm Migration',ns: 'migration'
+            }) as string
+          }
+          message={
+            t('migration.confirmMessage', {
+              defaultValue:
+                'This action will reset your application state version to 8 and trigger migrations. ' +
+                'Your data will be migrated to the latest version. Do you want to proceed?',ns: 'migration'
+            }) as string
+          }
+          setIsModalOpen={setIsModalOpen}
+          handleConfirm={() => {
+            setIsModalOpen(false);
+            handleMigration();
+          }}
+          handleClose={() => setIsModalOpen(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MigrationButton;

src/components/SettingsMenu/SettingsMenu.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useStore from '@store/store';
-import useCloudAuthStore from '@store/cloud-auth-store';
 
 import PopupModal from '@components/PopupModal';
 import SettingIcon from '@icon/SettingIcon';
@@ -10,13 +9,13 @@ import LanguageSelector from '@components/LanguageSelector';
 import AutoTitleToggle from './AutoTitleToggle';
 import AdvancedModeToggle from './AdvencedModeToggle';
 import InlineLatexToggle from './InlineLatexToggle';
-
 import PromptLibraryMenu from '@components/PromptLibraryMenu';
 import ChatConfigMenu from '@components/ChatConfigMenu';
 import EnterToSubmitToggle from './EnterToSubmitToggle';
 import TotalTokenCost, { TotalTokenCostToggle } from './TotalTokenCost';
 import ClearConversation from '@components/Menu/MenuOptions/ClearConversation';
 import DisplayChatSizeToggle from './DisplayChatSizeToggle';
+import MigrationButton from './MigrationButton';
 
 const SettingsMenu = () => {
   const { t } = useTranslation();
@@ -27,6 +26,7 @@ const SettingsMenu = () => {
   useEffect(() => {
     document.documentElement.className = theme;
   }, [theme]);
+
   return (
     <>
       <a
@@ -58,11 +58,12 @@ const SettingsMenu = () => {
             <PromptLibraryMenu />
             <ChatConfigMenu />
             <TotalTokenCost />
+            <MigrationButton />
           </div>
         </PopupModal>
       )}
     </>
   );
 };
 
-export default SettingsMenu;
+export default SettingsMenu;

src/components/TokenCount/TokenCount.tsx

@@ -59,8 +59,12 @@ const TokenCount = React.memo(() => {
 
   useEffect(() => {
     if (!generating) {
-      const textPrompts = messages.filter((e) => e.content.some(isTextContent));
-      const imgPrompts = messages.filter((e) => e.content.some(isImageContent));
+      const textPrompts = messages.filter(
+        (e) => Array.isArray(e.content) && e.content.some(isTextContent)
+      );
+      const imgPrompts = messages.filter(
+        (e) => Array.isArray(e.content) && e.content.some(isImageContent)
+      );
       const newPromptTokens = countTokens(textPrompts, model);
       const newImageTokens = countTokens(imgPrompts, model);
       setTokenCount(newPromptTokens);

src/i18n.ts

@@ -6,7 +6,7 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 
 const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID || undefined;
 
-const namespace = ['main', 'api', 'about', 'model', 'import'];
+const namespace = ['main', 'api', 'about', 'model', 'import', 'migration'];
 if (googleClientId) namespace.push('drive');
 
 i18n

src/store/store.ts

@@ -105,10 +105,8 @@ const useStore = create<StoreState>()(
             migrateV7(persistedState as LocalStorageInterfaceV7oV8);
           case 8:
             migrateV8_1(persistedState as LocalStorageInterfaceV8oV8_1);
-            break;
           case 8.1:
             migrateV8_1_fix(persistedState as LocalStorageInterfaceV8_1ToV8_2);
-            break;
           case 8.2:
             migrateV8_2(persistedState as LocalStorageInterfaceV8_2ToV9);
             break;

src/utils/messageUtils.ts

@@ -108,11 +108,12 @@ export const updateTotalTokenUsed = (
   );
 
   // Filter text and image prompts
-  const textPrompts = promptMessages.filter((e) =>
-    e.content.some(isTextContent)
+  const textPrompts = promptMessages.filter(
+    (e) => Array.isArray(e.content) && e.content.some(isTextContent)
   );
-  const imgPrompts = promptMessages.filter((e) =>
-    e.content.some(isImageContent)
+
+  const imgPrompts = promptMessages.filter(
+    (e) => Array.isArray(e.content) && e.content.some(isImageContent)
   );
 
   // Count tokens