feat: add external chat sites feature (#673)

- add external chat sites configuration in site settings
- support adding external chat sites with name and URL
- display external chat sites in model selector with external link icon
- click external chat site to open in new tab
- store external chat sites as BSON array in database
- add i18n support for external chat sites
- separate externalChatSites field from chatModels in API response

Signed-off-by: Bob Du <i@bobdu.cc>

Author: BobDu

service/src/index.ts

@@ -165,6 +165,9 @@ router.post('/session', async (req, res) => {
       }
     })
 
+    // Parse external chat sites list
+    const externalChatSites: Array<{ name: string, url: string }> = config.siteConfig.externalChatSites || []
+
     let userInfo: { name: string, description: string, avatar: string, userId: string, root: boolean, roles: UserRole[], config: UserConfig, advanced: AdvancedConfig }
     if (userId != null) {
       const user = await getUserById(userId)
@@ -177,8 +180,9 @@ router.post('/session', async (req, res) => {
             auth: hasAuth,
             allowRegister,
             title: config.siteConfig.siteTitle,
-            chatModels,
+            chatModels: chatModelOptions,
             allChatModels: chatModelOptions,
+            externalChatSites,
             showWatermark: config.siteConfig?.showWatermark,
             adminViewChatHistoryEnabled: process.env.ADMIN_VIEW_CHAT_HISTORY_ENABLED === 'true',
           },
@@ -333,6 +337,7 @@ router.post('/session', async (req, res) => {
           title: config.siteConfig.siteTitle,
           chatModels,
           allChatModels: chatModelOptions,
+          externalChatSites,
           usageCountLimit: config.siteConfig?.usageCountLimit,
           showWatermark: config.siteConfig?.showWatermark,
           adminViewChatHistoryEnabled: process.env.ADMIN_VIEW_CHAT_HISTORY_ENABLED === 'true',
@@ -352,6 +357,7 @@ router.post('/session', async (req, res) => {
         title: config.siteConfig.siteTitle,
         chatModels: chatModelOptions,
         allChatModels: chatModelOptions,
+        externalChatSites,
         showWatermark: config.siteConfig?.showWatermark,
         adminViewChatHistoryEnabled: process.env.ADMIN_VIEW_CHAT_HISTORY_ENABLED === 'true',
         userInfo,

service/src/storage/model.ts

@@ -256,6 +256,7 @@ export class SiteConfig {
     public s3Endpoint?: string,
     public s3PathPrefix?: string,
     public s3CustomDomain?: string,
+    public externalChatSites?: Array<{ name: string, url: string }>,
   ) { }
 }
 

src/components/common/Setting/Site.vue

@@ -12,25 +12,67 @@ const saving = ref(false)
 
 const config = ref(new SiteConfig())
 
+interface ExternalChatSite {
+  name: string
+  url: string
+}
+
+const externalChatSite = ref<ExternalChatSite[]>([])
+
 async function fetchConfig() {
   try {
     loading.value = true
     const { data } = await fetchChatConfig<ConfigState>()
     config.value = data.siteConfig ? data.siteConfig : new SiteConfig()
+
+    // Parse external chat sites list
+    if (config.value.externalChatSites && Array.isArray(config.value.externalChatSites)) {
+      externalChatSite.value = config.value.externalChatSites.map((item: any) => ({
+        name: item.name || '',
+        url: item.url || '',
+      }))
+    }
+    else {
+      externalChatSite.value = []
+    }
   }
   finally {
     loading.value = false
   }
 }
 
+function addExternalChatSite() {
+  externalChatSite.value.push({ name: '', url: '' })
+}
+
+function removeExternalChatSite(index: number) {
+  externalChatSite.value.splice(index, 1)
+}
+
 async function updateSiteInfo(site?: SiteConfig) {
   if (!site)
     return
 
+  // Set external chat sites list
+  const validSites = externalChatSite.value.filter(m => m.name && m.url)
+  site.externalChatSites = validSites.length > 0 ? validSites : undefined
+
   saving.value = true
   try {
     const { data } = await fetchUpdateSite(site)
     config.value = data
+
+    // Update external chat sites list display
+    if (data.externalChatSites && Array.isArray(data.externalChatSites)) {
+      externalChatSite.value = data.externalChatSites.map((item: any) => ({
+        name: item.name || '',
+        url: item.url || '',
+      }))
+    }
+    else {
+      externalChatSite.value = []
+    }
+
     ms.success(t('common.success'))
   }
   catch (error: any) {
@@ -127,6 +169,31 @@ onMounted(() => {
             />
           </div>
         </div>
+        <div class="space-y-4">
+          <div class="flex items-center space-x-4">
+            <span class="shrink-0 w-[100px]">{{ t('setting.externalChatSites') }}</span>
+            <div class="flex-1">
+              <NButton size="small" @click="addExternalChatSite">
+                {{ t('common.add') }}
+              </NButton>
+            </div>
+          </div>
+          <div v-for="(model, index) in externalChatSite" :key="index" class="flex items-center space-x-2 pl-[100px]">
+            <NInput
+              v-model:value="model.name"
+              :placeholder="t('setting.externalModelName')"
+              style="flex: 1;"
+            />
+            <NInput
+              v-model:value="model.url"
+              placeholder="URL"
+              style="flex: 2;"
+            />
+            <NButton size="small" type="error" @click="removeExternalChatSite(index)">
+              {{ t('common.delete') }}
+            </NButton>
+          </div>
+        </div>
         <!-- 增加新注册用户的全局数量设置 -->
         <div class="flex items-center space-x-4">
           <span class="shrink-0 w-[100px]">{{ t('setting.globalAmount') }}</span>

src/components/common/Setting/model.ts

@@ -41,6 +41,7 @@ export class SiteConfig {
   s3Endpoint?: string
   s3PathPrefix?: string
   s3CustomDomain?: string
+  externalChatSites?: Array<{ name: string, url: string }>
 }
 
 export class MailConfig {

src/locales/en-US.json

@@ -173,6 +173,8 @@
     "smtpFrom": "From",
     "siteTitle": "Title",
     "siteDomain": "Domain",
+    "externalChatSites": "External Chat Sites",
+    "externalModelName": "Site Name",
     "registerEnabled": "Register Enabled",
     "registerReview": "Register Review",
     "registerMails": "Register Mails",

src/locales/ko-KR.json

@@ -173,6 +173,8 @@
     "smtpFrom": "발신자 이메일",
     "siteTitle": "제목",
     "siteDomain": "도메인",
+    "externalChatSites": "외부 채팅 사이트",
+    "externalModelName": "사이트 이름",
     "registerEnabled": "등록 활성화",
     "registerReview": "등록 리뷰",
     "registerMails": "메일 등록",

src/locales/zh-CN.json

@@ -177,6 +177,8 @@
     "smtpFrom": "发件人邮箱",
     "siteTitle": "网站标题",
     "siteDomain": "域名 不含/",
+    "externalChatSites": "外部会话站点",
+    "externalModelName": "站点名称",
     "registerEnabled": "新用户",
     "registerReview": "新用户审核",
     "registerMails": "邮箱后缀",

src/locales/zh-TW.json

@@ -173,6 +173,8 @@
     "smtpFrom": "发件人邮箱",
     "siteTitle": "网站标题",
     "siteDomain": "域名 不含/",
+    "externalChatSites": "外部會話站點",
+    "externalModelName": "站點名稱",
     "registerEnabled": "新用户",
     "registerReview": "新用户审核",
     "registerMails": "后缀",

src/store/modules/auth/index.ts

@@ -22,6 +22,7 @@ interface SessionResponse {
     key: string
     value: string
   }[]
+  externalChatSites?: Array<{ name: string, url: string }>
   usageCountLimit: boolean
   showWatermark: boolean
   adminViewChatHistoryEnabled?: boolean

src/views/chat/index.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import type { MessageReactive, UploadFileInfo } from 'naive-ui'
 import html2canvas from 'html2canvas'
+import { h } from 'vue'
 import {
   fetchChatAPIProcessSSE,
   fetchChatResponseoHistory,
@@ -983,8 +984,61 @@ const footerClass = computed(() => {
   return classes
 })
 
+// Check if it's an external chat site (format: external:name:url)
+function isExternalModel(value: string): boolean {
+  return value.startsWith('external:')
+}
+
+// Extract URL from external chat site value
+function getExternalModelUrl(value: string): string | null {
+  if (!isExternalModel(value))
+    return null
+  const parts = value.split(':')
+  if (parts.length >= 3)
+    return parts.slice(2).join(':') // Handle URLs that may contain : symbol
+  return null
+}
+
+const chatModelOptions = computed(() => {
+  const baseModels = authStore.session?.chatModels ?? []
+  const externalSites = authStore.session?.externalChatSites ?? []
+
+  // Convert external chat sites to model options format
+  const externalOptions = externalSites.map(site => ({
+    label: site.name,
+    key: `external:${site.name}`,
+    value: `external:${site.name}:${site.url}`,
+  }))
+
+  return [...baseModels, ...externalOptions]
+})
+
+function renderChatModelLabel(option: { label: string, value: string }, _selected: boolean) {
+  if (isExternalModel(option.value)) {
+    return h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
+      option.label,
+      h(SvgIcon, {
+        icon: 'ri:external-link-line',
+        style: { fontSize: '14px', color: 'var(--n-text-color-secondary)' },
+      }),
+    ])
+  }
+  return option.label
+}
+
 async function handleSyncChatModel(chatModel: string) {
-  // 保存切换前的模型和 toolsEnabled 状态
+  // Check if it's an external chat site, open in new tab if so
+  if (isExternalModel(chatModel)) {
+    const url = getExternalModelUrl(chatModel)
+    if (url) {
+      const w = window.open(url, '_blank', 'noopener,noreferrer')
+      if (w)
+        w.opener = null
+    }
+    return
+  }
+
+  // Save previous model and toolsEnabled state before switching
   const previousModel = currentChatRoom.value?.chatModel
   const previousToolsEnabled = currentChatRoom.value?.toolsEnabled ?? false
 
@@ -1334,8 +1388,9 @@ onUnmounted(() => {
             <NSelect
               style="width: 250px"
               :value="currentChatRoom?.chatModel"
-              :options="authStore.session?.chatModels"
+              :options="chatModelOptions"
               :disabled="!!authStore.session?.auth && !authStore.token && !authStore.session?.authProxyEnabled"
+              :render-label="renderChatModelLabel"
               @update:value="handleSyncChatModel"
             />
             <HoverButton