feat: artifacts add open external (#1812)

* feat: artifacts add open external

* fix: remove modal

src/preload/index.d.ts

@@ -119,6 +119,9 @@ declare global {
         encrypt: (text: string, secretKey: string, iv: string) => Promise<{ iv: string; encryptedData: string }>
         decrypt: (encryptedData: string, iv: string, secretKey: string) => Promise<string>
       }
+      shell: {
+        openExternal: (url: string, options?: OpenExternalOptions) => Promise<void>
+      }
     }
   }
 }

src/preload/index.ts

@@ -1,6 +1,6 @@
 import { electronAPI } from '@electron-toolkit/preload'
 import { FileType, KnowledgeBaseParams, KnowledgeItem, Shortcut, WebDavConfig } from '@types'
-import { contextBridge, ipcRenderer, OpenDialogOptions } from 'electron'
+import { contextBridge, ipcRenderer, OpenDialogOptions, shell } from 'electron'
 
 // Custom APIs for renderer
 const api = {
@@ -104,6 +104,9 @@ const api = {
     encrypt: (text: string, secretKey: string, iv: string) => ipcRenderer.invoke('aes:encrypt', text, secretKey, iv),
     decrypt: (encryptedData: string, iv: string, secretKey: string) =>
       ipcRenderer.invoke('aes:decrypt', encryptedData, iv, secretKey)
+  },
+  shell: {
+    openExternal: shell.openExternal
   }
 }
 

src/renderer/src/i18n/locales/en-us.json

@@ -140,7 +140,9 @@
       "translate": "Translate",
       "topics.prompt": "Topic Prompts",
       "topics.prompt.tips": "Topic Prompts: Additional supplementary prompts provided for the current topic",
-      "topics.prompt.edit.title": "Edit Topic Prompts"
+      "topics.prompt.edit.title": "Edit Topic Prompts",
+      "artifacts.button.openExternal": "Open in external browser",
+      "artifacts.preview.openExternal.error.content": "Error opening the external browser."
     },
     "common": {
       "add": "Add",

src/renderer/src/i18n/locales/ja-jp.json

@@ -140,7 +140,9 @@
       "translate": "翻訳",
       "topics.prompt": "トピック提示語",
       "topics.prompt.tips": "トピック提示語：現在のトピックに対して追加の補足提示語を提供",
-      "topics.prompt.edit.title": "トピック提示語を編集する"
+      "topics.prompt.edit.title": "トピック提示語を編集する",
+      "artifacts.button.openExternal": "外部ブラウザで開く",
+      "artifacts.preview.openExternal.error.content": "外部ブラウザの起動に失敗しました。"
     },
     "common": {
       "add": "追加",
@@ -808,4 +810,4 @@
       "title": "ドキュメント"
     }
   }
-}
+}

src/renderer/src/i18n/locales/ru-ru.json

@@ -140,7 +140,9 @@
       "translate": "Перевести",
       "topics.prompt": "Тематические подсказки",
       "topics.prompt.tips": "Тематические подсказки: Дополнительные подсказки, предоставленные для текущей темы",
-      "topics.prompt.edit.title": "Редактировать подсказки темы"
+      "topics.prompt.edit.title": "Редактировать подсказки темы",
+      "artifacts.button.openExternal": "Открыть во внешнем браузере",
+      "artifacts.preview.openExternal.error.content": "Внешний браузер открылся с ошибкой"
     },
     "common": {
       "add": "Добавить",
@@ -787,4 +789,4 @@
       "title": "Документация"
     }
   }
-}
+}

src/renderer/src/i18n/locales/zh-cn.json

@@ -74,6 +74,8 @@
       "add.assistant.title": "添加助手",
       "artifacts.button.download": "下载",
       "artifacts.button.preview": "预览",
+      "artifacts.button.openExternal": "外部浏览器打开",
+      "artifacts.preview.openExternal.error.content": "外部浏览器打开出错",
       "assistant.search.placeholder": "搜索",
       "deeply_thought": "已深度思考（用时 {{secounds}} 秒）",
       "default.description": "你好，我是默认助手。你可以立刻开始跟我聊天。",

src/renderer/src/i18n/locales/zh-tw.json

@@ -140,7 +140,9 @@
       "translate": "翻譯",
       "topics.prompt": "話題提示詞",
       "topics.prompt.tips": "話題提示詞：針對目前話題提供額外的補充提示詞",
-      "topics.prompt.edit.title": "編輯話題提示詞"
+      "topics.prompt.edit.title": "編輯話題提示詞",
+      "artifacts.button.openExternal": "外部瀏覽器打開",
+      "artifacts.preview.openExternal.error.content": "外部瀏覽器打開出錯"
     },
     "common": {
       "add": "添加",
@@ -789,4 +791,4 @@
       "title": "幫助文件"
     }
   }
-}
+}

src/renderer/src/pages/home/Markdown/Artifacts.tsx

@@ -1,4 +1,4 @@
-import { DownloadOutlined, ExpandOutlined } from '@ant-design/icons'
+import { DownloadOutlined, ExpandOutlined, LinkOutlined } from '@ant-design/icons'
 import MinApp from '@renderer/components/MinApp'
 import { AppLogo } from '@renderer/config/env'
 import { extractTitle } from '@renderer/utils/formats'
@@ -13,29 +13,55 @@ interface Props {
 
 const Artifacts: FC<Props> = ({ html }) => {
   const { t } = useTranslation()
-  const title = extractTitle(html) || 'Artifacts' + ' ' + t('chat.artifacts.button.preview')
+  const title = extractTitle(html) || 'Artifacts ' + t('chat.artifacts.button.preview')
 
-  const onPreview = async () => {
+  /**
+   * 在应用内打开
+   */
+  const handleOpenInApp = async () => {
     const path = await window.api.file.create('artifacts-preview.html')
     await window.api.file.write(path, html)
-
+    const filePath = `file://${path}`
     MinApp.start({
       name: title,
       logo: AppLogo,
-      url: `file://${path}`
+      url: filePath
     })
   }
 
+  /**
+   * 外部链接打开
+   */
+  const handleOpenExternal = async () => {
+    const path = await window.api.file.create('artifacts-preview.html')
+    await window.api.file.write(path, html)
+    const filePath = `file://${path}`
+
+    if (window.api.shell && window.api.shell.openExternal) {
+      window.api.shell.openExternal(filePath)
+    } else {
+      console.error(t('artifacts.preview.openExternal.error.content'))
+    }
+  }
+
+  /**
+   * 下载文件
+   */
   const onDownload = () => {
     window.api.file.save(`${title}.html`, html)
   }
 
   return (
     <Container>
-      <Button type="primary" icon={<ExpandOutlined />} onClick={onPreview} size="small">
+      <Button icon={<ExpandOutlined />} onClick={handleOpenInApp}>
         {t('chat.artifacts.button.preview')}
       </Button>
-      <Button icon={<DownloadOutlined />} onClick={onDownload} size="small">
+
+      <Button icon={<LinkOutlined />} onClick={handleOpenExternal}>
+        {t('chat.artifacts.button.openExternal')}
+      </Button>
+
+      <Button icon={<DownloadOutlined />} onClick={onDownload}>
         {t('chat.artifacts.button.download')}
       </Button>
     </Container>