Enhanced the functionality for downloading image-based chat records; added support for the "o1-preview" and "o1-preview-2024-09-12" and "o1-mini" and "o1-mini-2024-09-12" and "chatgpt-4o-latest" and "gpt-4o-2024-11-20" and "gpt-4o-2024-08-06" and "gpt-4o-mini-2024-07-18" and "gpt-4o-mini" models, and revised the default model settings.

src/components/Chat/ChatContent/DownloadChat.tsx

@@ -20,6 +20,32 @@ const DownloadChat = React.memo(
   ({ saveRef }: { saveRef: React.RefObject<HTMLDivElement> }) => {
     const { t } = useTranslation();
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [isGenerating, setIsGenerating] = useState<boolean>(false);
+
+    const handleImageDownload = () => {
+      const currentRef = saveRef?.current;
+      if (currentRef) {
+        setIsGenerating(true);
+        requestAnimationFrame(async () => {
+          try {
+            currentRef.offsetHeight;
+            const imgData = await htmlToImg(currentRef);
+            await downloadImg(
+              imgData,
+              `${
+                useStore
+                  .getState()
+                  .chats?.[useStore.getState().currentChatIndex].title.trim() ??
+                'download'
+              }.png`
+            );
+          } finally {
+            setIsGenerating(false);
+          }
+        });
+      }
+    };
+
     return (
       <>
         <button
@@ -37,90 +63,79 @@ const DownloadChat = React.memo(
             title={t('downloadChat') as string}
             cancelButton={false}
           >
-            <div className='p-6 border-b border-gray-200 dark:border-gray-600 flex gap-4'>
-              <button
-                className='btn btn-neutral gap-2'
-                aria-label='image'
-                onClick={async () => {
-                  if (saveRef && saveRef.current) {
-                    const imgData = await htmlToImg(saveRef.current);
-                    downloadImg(
-                      imgData,
-                      `${
-                        useStore
-                          .getState()
-                          .chats?.[
-                            useStore.getState().currentChatIndex
-                          ].title.trim() ?? 'download'
-                      }.png`
-                    );
-                  }
-                }}
-              >
-                <ImageIcon />
-                Image
-              </button>
-              {/* <button
-                className='btn btn-neutral gap-2'
-                onClick={async () => {
-                  if (saveRef && saveRef.current) {
-                    const imgData = await htmlToImg(saveRef.current);
-                    downloadPDF(
-                      imgData,
-                      useStore.getState().theme,
-                      `${
-                        useStore
-                          .getState()
-                          .chats?.[
-                            useStore.getState().currentChatIndex
-                          ].title.trim() ?? 'download'
-                      }.pdf`
-                    );
-                  }
-                }}
-              >
-                <PdfIcon />
-                PDF
-              </button> */}
-              <button
-                className='btn btn-neutral gap-2'
-                aria-label='markdown'
-                onClick={async () => {
-                  if (saveRef && saveRef.current) {
-                    const chats = useStore.getState().chats;
-                    if (chats) {
-                      const markdown = chatToMarkdown(
-                        chats[useStore.getState().currentChatIndex]
-                      );
-                      downloadMarkdown(
-                        markdown,
+            <div className="flex flex-col items-center">
+              <div className='p-6 border-b border-gray-200 dark:border-gray-600 flex gap-4'>
+                <button
+                  className='btn btn-neutral gap-2'
+                  aria-label='image'
+                  onClick={handleImageDownload}
+                  disabled={isGenerating}
+                >
+                  <ImageIcon />
+                  Image
+                </button>
+                {/* <button
+                  className='btn btn-neutral gap-2'
+                  onClick={async () => {
+                    if (saveRef && saveRef.current) {
+                      const imgData = await htmlToImg(saveRef.current);
+                      downloadPDF(
+                        imgData,
+                        useStore.getState().theme,
                         `${
-                          chats[
-                            useStore.getState().currentChatIndex
-                          ].title.trim() ?? 'download'
-                        }.md`
+                          useStore
+                            .getState()
+                            .chats?.[
+                              useStore.getState().currentChatIndex
+                            ].title.trim() ?? 'download'
+                        }.pdf`
                       );
                     }
-                  }
-                }}
-              >
-                <MarkdownIcon />
-                Markdown
-              </button>
-              <button
-                className='btn btn-neutral gap-2'
-                aria-label='json'
-                onClick={async () => {
-                  const chats = useStore.getState().chats;
-                  if (chats) {
-                    const chat = chats[useStore.getState().currentChatIndex];
-                    downloadFile([chat], chat.title);
-                  }
-                }}
-              >
-                <JsonIcon />
-                JSON
-              </button>
+                  }}
+                >
+                  <PdfIcon />
+                  PDF
+                </button> */}
+                <button
+                  className='btn btn-neutral gap-2'
+                  aria-label='markdown'
+                  onClick={async () => {
+                    if (saveRef && saveRef.current) {
+                      const chats = useStore.getState().chats;
+                      if (chats) {
+                        const markdown = chatToMarkdown(
+                          chats[useStore.getState().currentChatIndex]
+                        );
+                        downloadMarkdown(
+                          markdown,
+                          `${
+                            chats[
+                              useStore.getState().currentChatIndex
+                            ].title.trim() ?? 'download'
+                          }.md`
+                        );
+                      }
+                    }
+                  }}
+                >
+                  <MarkdownIcon />
+                  Markdown
+                </button>
+                <button
+                  className='btn btn-neutral gap-2'
+                  aria-label='json'
+                  onClick={async () => {
+                    const chats = useStore.getState().chats;
+                    if (chats) {
+                      const chat = chats[useStore.getState().currentChatIndex];
+                      downloadFile([chat], chat.title);
+                    }
+                  }}
+                >
+                  <JsonIcon />
+                  JSON
+                </button>
+              </div>
             </div>
           </PopupModal>
         )}

src/constants/chat.ts

@@ -14,7 +14,7 @@ const dateString =
 export const _defaultSystemMessage =
   import.meta.env.VITE_DEFAULT_SYSTEM_MESSAGE ??
   `You are ChatGPT, a large language model trained by OpenAI.
-Carefully heed the user's instructions. 
+Carefully heed the user's instructions.
 Respond using Markdown.`;
 
 export const modelOptions: ModelOptions[] = [
@@ -28,14 +28,23 @@ export const modelOptions: ModelOptions[] = [
   'gpt-4-0125-preview',
   'gpt-4-turbo',
   'gpt-4-turbo-2024-04-09',
+  'gpt-4o-mini',
+  'gpt-4o-mini-2024-07-18',
   'gpt-4o',
   'gpt-4o-2024-05-13',
+  'gpt-4o-2024-08-06',
+  'gpt-4o-2024-11-20',
+  'chatgpt-4o-latest',
+  'o1-mini',
+  'o1-mini-2024-09-12',
+  'o1-preview',
+  'o1-preview-2024-09-12',
   // 'gpt-3.5-turbo-0301',
   // 'gpt-4-0314',
   // 'gpt-4-32k-0314',
 ];
 
-export const defaultModel = 'gpt-3.5-turbo';
+export const defaultModel = 'gpt-4o-mini';
 
 export const modelMaxToken = {
   'gpt-3.5-turbo': 4096,
@@ -55,8 +64,17 @@ export const modelMaxToken = {
   'gpt-4-0125-preview': 128000,
   'gpt-4-turbo': 128000,
   'gpt-4-turbo-2024-04-09': 128000,
+  'gpt-4o-mini': 128000,
+  'gpt-4o-mini-2024-07-18': 128000,
   'gpt-4o': 128000,
   'gpt-4o-2024-05-13': 128000,
+  'gpt-4o-2024-08-06': 128000,
+  'gpt-4o-2024-11-20': 128000,
+  'chatgpt-4o-latest': 128000,
+  'o1-mini': 128000,
+  'o1-mini-2024-09-12': 128000,
+  'o1-preview': 128000,
+  'o1-preview-2024-09-12': 128000,
 };
 
 export const modelCost = {
@@ -128,6 +146,14 @@ export const modelCost = {
     prompt: { price: 0.01, unit: 1000 },
     completion: { price: 0.03, unit: 1000 },
   },
+  'gpt-4o-mini': {
+    prompt: { price: 0.00015, unit: 1000 },
+    completion: { price: 0.0006, unit: 1000 },
+  },
+  'gpt-4o-mini-2024-07-18': {
+    prompt: { price: 0.00015, unit: 1000 },
+    completion: { price: 0.0006, unit: 1000 },
+  },
   'gpt-4o': {
     prompt: { price: 0.005, unit: 1000 },
     completion: { price: 0.015, unit: 1000 },
@@ -136,6 +162,34 @@ export const modelCost = {
     prompt: { price: 0.005, unit: 1000 },
     completion: { price: 0.015, unit: 1000 },
   },
+  'gpt-4o-2024-08-06': {
+    prompt: { price: 0.0025, unit: 1000 },
+    completion: { price: 0.01, unit: 1000 },
+  },
+  'gpt-4o-2024-11-20': {
+    prompt: { price: 0.0025, unit: 1000 },
+    completion: { price: 0.01, unit: 1000 },
+  },
+  'chatgpt-4o-latest': {
+    prompt: { price: 0.0025, unit: 1000 },
+    completion: { price: 0.01, unit: 1000 },
+  },
+  'o1-mini': {
+    prompt: { price: 0.003, unit: 1000 },
+    completion: { price: 0.012, unit: 1000 },
+  },
+  'o1-mini-2024-09-12': {
+    prompt: { price: 0.003, unit: 1000 },
+    completion: { price: 0.012, unit: 1000 },
+  },
+  'o1-preview': {
+    prompt: { price: 0.015, unit: 1000 },
+    completion: { price: 0.06, unit: 1000 },
+  },
+  'o1-preview-2024-09-12': {
+    prompt: { price: 0.015, unit: 1000 },
+    completion: { price: 0.06, unit: 1000 },
+  },
 };
 
 export const defaultUserMaxToken = 4000;

src/types/chat.ts

@@ -50,8 +50,17 @@ export interface Folder {
 }
 
 export type ModelOptions =
+  | 'gpt-4o-mini'
+  | 'gpt-4o-mini-2024-07-18'
   | 'gpt-4o'
   | 'gpt-4o-2024-05-13'
+  | 'gpt-4o-2024-08-06'
+  | 'gpt-4o-2024-11-20'
+  | 'chatgpt-4o-latest'
+  | 'o1-mini'
+  | 'o1-mini-2024-09-12'
+  | 'o1-preview'
+  | 'o1-preview-2024-09-12'
   | 'gpt-4'
   | 'gpt-4-32k'
   | 'gpt-4-1106-preview'