chore: release 1.11.14

README.md

@@ -21,7 +21,6 @@
 
 - [chrome商店](https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp)
 - [edge商店](https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan)
-- [firefox商店](https://addons.mozilla.org/zh-CN/firefox/addon/bilibili-subtitle)
 
 ## 使用说明
 
@@ -46,11 +45,15 @@ github: [IndieKKY](https://github.com/IndieKKY)
 node版本：18.15.0
 包管理器：pnpm
 
-- 本地调试：`pnpm run dev`，然后加载`dist`目录。
-- 打生产包：`pnpm run build`，然后加载`dist`目录。
+- 本地调试：`pnpm run dev`，然后浏览器扩展管理页面，开启开发者模式，再加载已解压的扩展程序，选择`dist`目录。
+- 打生产包：`pnpm run build`，然后浏览器扩展管理页面，开启开发者模式，再加载已解压的扩展程序，选择`dist`目录。
 
 注：`./push.sh`是作者自用脚本，可以忽略。
 
+提示：最新版浏览器安全方面有更新，开发调试可能有问题，会报csp错误！
+暂时的解决办法是`pnpm run dev`运行起来后，手动将`dist/manifest.json`文件里的web_accessible_resources里的use_dynamic_url都修改为false，然后浏览器扩展管理页面点击重载一下，就能正常（是@crxjs/vite-plugin依赖的问题，这个依赖很长时间没更新了，这个bug也没修复，暂时没发现更好的解决办法）。
+构建后正常，关键是fix.cjs里将use_dynamic_url设置为false的这个操作。
+
 ## 贡献指南
 
 欢迎贡献代码或提出改进建议！如果您希望为该项目做出贡献，请遵循以下步骤：

fix.cjs

@@ -5,4 +5,11 @@ const fs = require('fs')
 //copy index.html to sidepanel.html
 fs.copyFileSync('./dist/index.html', './dist/sidepanel.html')
 
+//set all use_dynamic_url to false
+const manifest = require('./dist/manifest.json')
+manifest.web_accessible_resources.forEach(resource => {
+  resource.use_dynamic_url = false
+})
+fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2))
+
 console.log('fix.js done');

manifest.config.ts

@@ -12,9 +12,10 @@ const [major, minor, patch, label = '0'] = version
   .split(/[.-]/)
 
 export default defineManifest(async (env) => ({
-  "name": "哔哔君 - 哔哩哔哩字幕列表",
-  "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
+  "name": '__MSG_appName__',
+  "description": '__MSG_appDescription__',
   "version": `${major}.${minor}.${patch}`,
+  "default_locale": "zh_CN",
   "manifest_version": 3,
   "permissions": [
     "sidePanel",
@@ -56,7 +57,7 @@ export default defineManifest(async (env) => ({
       "resources": [
         "index.html",
       ],
-      "use_dynamic_url": true
+      "use_dynamic_url": false
     }
   ]
 }))

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "bilibili-subtitle",
-  "version": "1.11.4",
+  "version": "1.11.14",
   "type": "module",
   "description": "哔哩哔哩字幕列表",
   "main": "index.js",
@@ -24,6 +24,7 @@
     "ahooks": "^3.7.1",
     "classnames": "^2.3.2",
     "daisyui": "^2.42.1",
+    "dayjs": "^1.11.13",
     "js-search": "^2.0.0",
     "less": "^4.1.3",
     "lodash-es": "^4.17.21",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       daisyui:
         specifier: ^2.42.1
         version: 2.42.1(autoprefixer@10.4.13(postcss@8.4.19))(postcss@8.4.19)
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       js-search:
         specifier: ^2.0.0
         version: 2.0.0
@@ -856,8 +859,8 @@ packages:
       autoprefixer: ^10.0.2
       postcss: ^8.1.6
 
-  dayjs@1.11.5:
-    resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
 
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@@ -3114,7 +3117,7 @@ snapshots:
     dependencies:
       '@types/js-cookie': 2.2.7
       ahooks-v3-count: 1.0.0
-      dayjs: 1.11.5
+      dayjs: 1.11.13
       intersection-observer: 0.12.2
       js-cookie: 2.2.1
       lodash: 4.17.21
@@ -3126,7 +3129,7 @@ snapshots:
     dependencies:
       '@types/js-cookie': 2.2.7
       ahooks-v3-count: 1.0.0
-      dayjs: 1.11.5
+      dayjs: 1.11.13
       intersection-observer: 0.12.2
       js-cookie: 2.2.1
       lodash: 4.17.21
@@ -3385,7 +3388,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  dayjs@1.11.5: {}
+  dayjs@1.11.13: {}
 
   debug@2.6.9:
     dependencies:

public/_locales/zh_CN/messages.json

@@ -0,0 +1,8 @@
+{
+  "appName": {
+    "message": "哔哔君 - bilibili哔哩哔哩字幕列表"
+  },
+  "appDescription": {
+    "message": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!"
+  }
+}

src/chrome/openaiService.ts

@@ -7,13 +7,17 @@ const getServerUrl = (serverUrl?: string) => {
   if (serverUrl.endsWith('/')) {
     serverUrl = serverUrl.slice(0, -1)
   }
+  //如果serverUrl不以/vxxx结尾，则添加/v1
+  if (!/\/v\d+$/.test(serverUrl.toLowerCase())) {
+    serverUrl += '/v1'
+  }
   return serverUrl
 }
 
 export const handleChatCompleteTask = async (task: Task) => {
   const data = task.def.data
   const serverUrl = getServerUrl(task.def.serverUrl)
-  const resp = await fetch(`${serverUrl}/v1/chat/completions`, {
+  const resp = await fetch(`${serverUrl}/chat/completions`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

src/components/Body.tsx

@@ -39,6 +39,7 @@ import Ask from './Ask'
 import { v4 } from 'uuid'
 import RateExtension from '../components/RateExtension'
 import ApiKeyReminder from './ApiKeyReminder'
+import useMessaging from '@/messaging/layer2/useMessaging'
 
 const Body = () => {
   const dispatch = useAppDispatch()
@@ -65,6 +66,7 @@ const Body = () => {
   // const fontSize = useAppSelector(state => state.env.envData.fontSize)
   const searchText = useAppSelector(state => state.env.searchText)
   const asks = useAppSelector(state => state.env.asks)
+  const {disconnected} = useMessaging()
   // const recommendIdx = useMemo(() => random(0, 3), [])
   const showSearchInput = useMemo(() => {
     return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
@@ -262,6 +264,10 @@ const Body = () => {
       {searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle /></button>}
     </div>}
 
+    {disconnected && <div className='flex flex-col justify-center items-center gap-2 text-sm bg-red-400 rounded mx-2'>
+        <span className='flex items-center gap-1 text-white'><AiOutlineCloseCircle className='text-white' />已断开连接</span>
+      </div>}
+
     {/* auto scroll btn */}
     {!autoScroll && <div
       className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'
@@ -304,22 +310,22 @@ const Body = () => {
       {/*  </button>} */}
       {/* </div> */}
       <div className='flex flex-col'>
-        {/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
-        {/*  <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png' */}
-        {/*                                                                          alt='BibiGPT logo' */}
-        {/*                                                                          className='w-8 h-8'/>BibiGPT */}
-        {/*  </div> */}
-        {/*  <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span */}
-        {/*    className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频） */}
-        {/*  </div> */}
-        {/*  <div className='flex gap-2'> */}
-        {/*    <a title='BibiGPT' href='https://bibigpt.co/r/bilibili' */}
-        {/*       onClick={(e) => { */}
-        {/*         e.preventDefault() */}
-        {/*         openUrl('https://bibigpt.co/r/bilibili') */}
-        {/*       }} className='link text-sm text-accent'>✨ BibiGPT ✨</a> */}
-        {/*  </div> */}
-        {/* </div> */}
+         <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
+          <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png'
+                                                                                  alt='BibiGPT logo'
+                                                                                  className='w-8 h-8'/>BibiGPT
+          </div>
+          <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span
+            className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频）
+          </div>
+          <div className='flex gap-2'>
+            <a title='BibiGPT' href='https://bibigpt.co/r/bilibili'
+               onClick={(e) => {
+                 e.preventDefault()
+                 openUrl('https://bibigpt.co/r/bilibili')
+               }} className='link text-sm text-accent'>✨ BibiGPT ✨</a>
+          </div>
+         </div>
         <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
           <div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
             alt='youtube caption logo'
@@ -415,4 +421,4 @@ const Body = () => {
   </div>
 }
 
-export default Body
+export default Body

src/components/DebateChat.tsx

@@ -0,0 +1,43 @@
+import { useAppSelector } from '@/hooks/redux';
+import React from 'react';
+
+const DebateChat: React.FC<DebateProps> = ({ messages }) => {
+    const fontSize = useAppSelector(state => state.env.envData.fontSize)
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto p-4">
+        {messages.map((message, index) => (
+          <div
+            key={index}
+            className={`flex mb-4 ${
+              message.side === 'pro' ? 'justify-start' : 'justify-end'
+            }`}
+          >
+            <div
+              className={`max-w-[85%] rounded-2xl p-3 shadow-md relative ${
+                message.side === 'pro'
+                  ? 'bg-blue-100 text-blue-800 ml-2'
+                  : 'bg-green-100 text-green-800 mr-2'
+              }`}
+            >
+              <p className={`${fontSize === 'large' ? 'text-sm' : 'text-xs'} font-bold mb-1`}>
+                {message.side === 'pro' ? '正方' : '反方'}
+              </p>
+              <p className={fontSize === 'large' ? 'text-sm' : 'text-xs'}>{message.content}</p>
+              <div
+                className={`absolute w-4 h-4 ${
+                  message.side === 'pro'
+                    ? 'bg-blue-100 -left-2 top-2 rounded-bl-full'
+                    : 'bg-green-100 -right-2 top-2 rounded-br-full'
+                }`}
+              ></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DebateChat;

src/components/Header.tsx

@@ -83,8 +83,8 @@ const Header = (props: {
     }
   }}>
     <div className='shrink-0 flex items-center'>
-      <img src="bibijun.png" alt="Logo" className="w-auto h-6 ml-2 mr-1" />
-      {/* <span className='shrink-0 text-[15px] font-medium pl-1 pr-[14px]'>字幕列表</span> */}
+      {/* <img src="bibijun.png" alt="Logo" className="w-auto h-6 ml-2 mr-1" /> */}
+      <span className='shrink-0 text-[15px] font-medium pl-[16px] pr-[14px]'>字幕列表</span>
       <MoreBtn placement={'right-start'}/>
     </div>
     <div className='flex gap-0.5 items-center mr-[16px]'>

src/components/MoreBtn.tsx

@@ -19,6 +19,8 @@ import {downloadText, openUrl} from '@kky002/kky-util'
 import toast from 'react-hot-toast'
 import {getSummarize} from '../utils/bizUtil'
 import { useMessage } from '@/hooks/message'
+import dayjs from 'dayjs';
+
 interface Props {
   placement: Placement
 }
@@ -68,6 +70,8 @@ const MoreBtn = (props: Props) => {
   const segments = useAppSelector(state => state.env.segments)
   const url = useAppSelector(state => state.env.url)
   const title = useAppSelector(state => state.env.title)
+  const ctime = useAppSelector(state => state.env.ctime) //时间戳，单位s
+  const author = useAppSelector(state => state.env.author)
   const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
 
   const {sendInject} = useMessage()
@@ -79,20 +83,21 @@ const MoreBtn = (props: Props) => {
 
     let fileName = title
     let s, suffix
+    let time = ctime ? dayjs(ctime * 1000).format('YYYY-MM-DD HH:mm:ss') : '' // 2024-05-01 12:00:00
     if (!downloadType || downloadType === 'text') {
-      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
+      s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
       for (const item of data.body) {
         s += item.content + '\n'
       }
       suffix = 'txt'
     } else if (downloadType === 'textWithTime') {
-      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
+      s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
       for (const item of data.body) {
         s += formatTime(item.from) + ' ' + item.content + '\n'
       }
       suffix = 'txt'
     } else if (downloadType === 'article') {
-      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
+      s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
       for (const item of data.body) {
         s += item.content + ', '
       }
@@ -142,7 +147,7 @@ const MoreBtn = (props: Props) => {
       s = JSON.stringify(data)
       suffix = 'json'
     } else if (downloadType === 'summarize') {
-      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
+      s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
       const [success, content] = getSummarize(title, segments, curSummaryType)
       if (!success) return
       s += content

src/components/SegmentCard.tsx

@@ -2,7 +2,7 @@ import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef} from '
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {setFloatKeyPointsSegIdx, setSegmentFold, setTempData} from '../redux/envReducer'
 import classNames from 'classnames'
-import {FaClipboardList} from 'react-icons/fa'
+import {FaClipboardList, FaComments} from 'react-icons/fa'
 import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../consts/const'
 import useTranslate from '../hooks/useTranslate'
 import {BsDashSquare, BsPlusSquare, CgFileDocument, FaQuestion, GrOverview, RiFileCopy2Line} from 'react-icons/all'
@@ -12,6 +12,7 @@ import {useInViewport} from 'ahooks'
 import SegmentItem from './SegmentItem'
 import {stopPopFunc} from '../utils/util'
 import useSubtitle from '../hooks/useSubtitle'
+import DebateChat from './DebateChat'
 
 const SummarizeItemOverview = (props: {
   segment: Segment
@@ -113,6 +114,8 @@ const Summarize = (props: {
             <div className={classNames('font-normal', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.a}</div>
           </div>)}
         </div>}
+      {summary?.type === 'debate' && (summary.content != null) &&
+        <DebateChat messages={summary.content} />}
     </div>
     <div className='flex flex-col justify-center items-center'>
       {segment.text.length < SUMMARIZE_THRESHOLD && <div className='desc-lighter text-xs'>文字过短，无法总结.</div>}
@@ -200,8 +203,14 @@ const SegmentCard = (props: {
     }))
   }, [dispatch])
 
+  const onSelDebate = useCallback(() => {
+    dispatch(setTempData({
+      curSummaryType: 'debate'
+    }))
+  }, [dispatch])
+
   return <div
-    className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1 shadow', showCurrent && 'shadow-primary')}>
+    className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1', showCurrent && 'shadow shadow-md')}>
     <div className='relative flex justify-center min-h-[20px]'>
       {segments != null && segments.length > 0 &&
         <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
@@ -215,6 +224,7 @@ const SegmentCard = (props: {
         <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'overview' && 'tab-active')} onClick={onSelOverview}><GrOverview/>概览</a>
         <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'keypoint' && 'tab-active')} onClick={onSelKeypoint}><FaClipboardList/>要点</a>
         <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'question' && 'tab-active')} onClick={onSelQuestion}><FaQuestion/>问题</a>
+        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'debate' && 'tab-active')} onClick={onSelDebate}><FaComments/>辩论</a>
         <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
       </div>}
       <div

src/consts/const.ts

@@ -11,6 +11,7 @@ export const PROMPT_TYPE_TRANSLATE = 'translate'
 export const PROMPT_TYPE_SUMMARIZE_OVERVIEW = 'summarize_overview'
 export const PROMPT_TYPE_SUMMARIZE_KEYPOINT = 'summarize_keypoint'
 export const PROMPT_TYPE_SUMMARIZE_QUESTION = 'summarize_question'
+export const PROMPT_TYPE_SUMMARIZE_DEBATE = 'summarize_debate'
 export const PROMPT_TYPE_SUMMARIZE_BRIEF = 'summarize_brief'
 export const PROMPT_TYPE_ASK = 'ask'
 export const PROMPT_TYPES = [{
@@ -28,6 +29,9 @@ export const PROMPT_TYPES = [{
 }, {
   name: '问题',
   type: PROMPT_TYPE_SUMMARIZE_QUESTION,
+}, {
+  name: '辩论',
+  type: PROMPT_TYPE_SUMMARIZE_DEBATE,
 }, {
   name: '提问',
   type: PROMPT_TYPE_ASK,
@@ -58,6 +62,12 @@ export const SUMMARIZE_TYPES = {
     downloadName: '💡常见问题💡',
     promptType: PROMPT_TYPE_SUMMARIZE_QUESTION,
   },
+  debate: {
+    name: '辩论',
+    desc: '辩论',
+    downloadName: '💡辩论💡',
+    promptType: PROMPT_TYPE_SUMMARIZE_DEBATE,
+  },
 }
 
 export const PROMPT_DEFAULTS = {
@@ -175,6 +185,42 @@ Provide an example to illustrate the expected output:
     }
 ]
 \`\`\`
+`,
+[PROMPT_TYPE_SUMMARIZE_DEBATE]: `You are a helpful assistant skilled at generating debates based on video subtitles.
+
+## Context
+
+The video's title: '''{{title}}'''.
+The video's subtitles:
+
+'''
+{{segment}}
+'''
+
+## Command
+
+Please play the roles of both the affirmative and negative sides to discuss the author's viewpoint.
+The conversation should consist of 10 rounds(5 sentences from the affirmative side, 5 sentences from the negative side.).
+The tone should be straightforward.
+
+Answer in language '{{language}}'.
+
+## Output format
+
+Provide an example to illustrate the expected output:
+
+\`\`\`json
+[
+    {
+        "side": "pro",
+        "content": "xxx"
+    },
+    {
+        "side": "con",
+        "content": "xxx"
+    }
+]
+\`\`\`
 `,
   [PROMPT_TYPE_ASK]: `You are a helpful assistant who answers question related to video subtitles.
 Answer in language '{{language}}'.
@@ -219,7 +265,7 @@ export const SUMMARIZE_THRESHOLD = 100
 export const SUMMARIZE_LANGUAGE_DEFAULT = 'cn'
 export const SUMMARIZE_ALL_THRESHOLD = 5
 export const ASK_ENABLED_DEFAULT = true
-export const DEFAULT_SERVER_URL_OPENAI = 'https://api.openai.com'
+export const DEFAULT_SERVER_URL_OPENAI = 'https://api.openai.com/v1'
 export const CUSTOM_MODEL_TOKENS = 16385
 
 export const MODEL_TIP = '推荐gpt-4o-mini，能力强，价格低，token上限大'
@@ -245,6 +291,9 @@ for (const model of MODELS) {
 export const LANGUAGES = [{
   code: 'en',
   name: 'English',
+}, {
+  code: 'ja',
+  name: '日本語',
 }, {
   code: 'ena',
   name: 'American English',
@@ -278,6 +327,39 @@ export const LANGUAGES = [{
 }, {
   code: 'Italian',
   name: 'Italiano',
+}, {
+  code: 'ko',
+  name: '한국어',
+}, {
+  code: 'hi',
+  name: 'हिन्दी',
+}, {
+  code: 'tr',
+  name: 'Türkçe',
+}, {
+  code: 'nl',
+  name: 'Nederlands',
+}, {
+  code: 'pl',
+  name: 'Polski',
+}, {
+  code: 'sv',
+  name: 'Svenska',
+}, {
+  code: 'vi',
+  name: 'Tiếng Việt',
+}, {
+  code: 'th',
+  name: 'ไทย',
+}, {
+  code: 'id',
+  name: 'Bahasa Indonesia',
+}, {
+  code: 'el',
+  name: 'Ελληνικά',
+}, {
+  code: 'he',
+  name: 'עברית',
 }]
 export const LANGUAGES_MAP: {[key: string]: typeof LANGUAGES[number]} = {}
 for (const language of LANGUAGES) {

src/hooks/useMessageService.ts

@@ -1,4 +1,4 @@
-import { setCurFetched, setCurInfo, setData, setInfos, setTitle, setUrl } from '@/redux/envReducer'
+import { setAuthor, setCtime, setCurFetched, setCurInfo, setData, setInfos, setTitle, setUrl } from '@/redux/envReducer'
 import { useMemo } from 'react'
 import { useAppDispatch } from './redux'
 import useMessagingService from '@/messaging/layer2/useMessagingService'
@@ -20,6 +20,8 @@ const useMessageService = () => {
       dispatch(setInfos(params.infos))
       dispatch(setUrl(params.url))
       dispatch(setTitle(params.title))
+      dispatch(setCtime(params.ctime))
+      dispatch(setAuthor(params.author))
       console.debug('video title: ', params.title)
     },
   }), [dispatch])

src/inject/inject.ts

@@ -120,6 +120,8 @@ const debug = (...args: any[]) => {
   }
 
   let aid: number | null = null
+  let ctime: number | null = null
+  let author: string | undefined
   let title = ''
   let pages: any[] = []
   let pagesMap: Record<string, any> = {}
@@ -162,8 +164,10 @@ const debug = (...args: any[]) => {
           aid = parseInt(aidOrBvid.slice(2))
           pages = await fetch(`https://api.bilibili.com/x/player/pagelist?aid=${aid}`, { credentials: 'include' }).then(res => res.json()).then(res => res.data)
           cid = pages[0].cid
+          ctime = pages[0].ctime
+          author = pages[0].owner?.name
           title = pages[0].part
-          await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
+          await fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
             subtitles = res.data.subtitle.subtitles
           })
         } else {//bvxxx
@@ -171,9 +175,11 @@ const debug = (...args: any[]) => {
             title = res.data.title
             aid = res.data.aid
             cid = res.data.cid
+            ctime = res.data.ctime
+            author = res.data.owner?.name
             pages = res.data.pages
           })
-          await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
+          await fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
             subtitles = res.data.subtitle.subtitles
           })
         }
@@ -191,6 +197,8 @@ const debug = (...args: any[]) => {
           url: location.origin + location.pathname,
           title,
           aid,
+          ctime,
+          author,
           pages,
           infos: subtitles,
         })
@@ -218,15 +226,18 @@ const debug = (...args: any[]) => {
       lastAid = aid
       lastCid = cid
       if (aid && cid) {
-        fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, {
+        fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid}&cid=${cid}`, {
           credentials: 'include',
         })
           .then(res => res.json())
           .then(res => {
-            // console.log('refreshSubtitles: ', aid, cid, res)
-            runtime.injectMessaging.sendApp('SET_INFOS', {
-              infos: res.data.subtitle.subtitles
-            })
+            //remove elements with empty subtitle_url
+            res.data.subtitle.subtitles = res.data.subtitle.subtitles.filter((item: any) => item.subtitle_url)
+            if (res.data.subtitle.subtitles.length > 0) {
+              runtime.injectMessaging.sendApp('SET_INFOS', {
+                infos: res.data.subtitle.subtitles
+              })
+            }
           })
       }
     }

src/message-typings.d.ts

@@ -80,7 +80,7 @@ interface ExtensionCloseSidePanelMessage extends ExtensionMessage {
     method: 'SET_INFOS';
   }
   
-  interface AppSetVideoInfoMessage extends AppMessage<{ url: string, title: string, aid: number | null, pages: any, infos: any }> {
+  interface AppSetVideoInfoMessage extends AppMessage<{ url: string, title: string, aid: number | null, ctime: number | null, author?: string, pages: any, infos: any }> {
     method: 'SET_VIDEO_INFO';
   }
   

src/messaging/layer1/Layer1Protocol.ts

@@ -25,6 +25,7 @@ class Layer1Protocol<L1Req = any, L1Res = any> {
   private timeout: number
   private requests: Map<string, { resolve: (value: L1Res) => void, reject: (reason?: any) => void, timer: number }>
   private handler: Handler<L1Req, L1Res>
+  public disconnected: boolean = false
 
   constructor(handler: Handler<L1Req, L1Res>, port: chrome.runtime.Port, autoDispose = true, timeout = 30000) {  // 默认超时 30 秒
     this.port = port;
@@ -82,6 +83,7 @@ class Layer1Protocol<L1Req = any, L1Res = any> {
   }
 
   dispose() {
+    this.disconnected = true
     this.port.onMessage.removeListener(this._messageListener);
     if (this.port.onDisconnect) {
       this.port.onDisconnect.removeListener(this.dispose);

src/messaging/layer2/useMessaging.ts

@@ -1,12 +1,18 @@
 import { msgWaiter } from './useMessagingService'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import Layer1Protocol from '../layer1/Layer1Protocol'
 import { L2ReqMsg, L2ResMsg, TAG_TARGET_INJECT } from '../const'
 
 const useMessaging = <AllExtensionMessagesType extends ExtensionMessage, AllInjectMessagesType extends InjectMessage>() => {
+    const [disconnected, setDisconnected] = useState(false)
+
     const sendExtension = useCallback(async <M extends AllExtensionMessagesType | MessagingExtensionMessages, K extends M['method']>(method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
         // wait
         const pmh = await msgWaiter.wait() as Layer1Protocol<L2ReqMsg, L2ResMsg>
+        if (pmh.disconnected) {
+            setDisconnected(true)
+            throw new Error('disconnected')
+        }
         // send message
         const res = await pmh.sendMessage({
             from: 'app',
@@ -30,7 +36,8 @@ const useMessaging = <AllExtensionMessagesType extends ExtensionMessage, AllInje
 
     return {
         sendExtension,
-        sendInject
+        sendInject,
+        disconnected
     }
 }
 

src/pages/OptionsPage.tsx

@@ -27,7 +27,7 @@ import toast from 'react-hot-toast'
 import {useBoolean, useEventTarget} from 'ahooks'
 import {useEventChecked} from '@kky002/kky-hooks'
 import { useMessage } from '@/hooks/message'
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
+import { FaChevronDown, FaChevronUp, FaGripfire } from 'react-icons/fa'
 
 const OptionCard = ({ title, children, defaultExpanded = true }: { title: React.ReactNode; children: React.ReactNode; defaultExpanded?: boolean }) => {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
@@ -261,14 +261,15 @@ const OptionsPage = () => {
             <div>服务器地址：<a className='link link-primary'
                                onClick={() => setServerUrlValue(DEFAULT_SERVER_URL_OPENAI)}
                                rel='noreferrer'>点击设置</a></div>
-            {/* <div className='flex justify-center font-semibold'>【第三方代理】</div> */}
-            {/* <div>代理网址：<a className='link link-primary' href='https://api.openai-up.com/register?aff=varM' */}
-            {/*                 target='_blank' */}
-            {/*                 rel="noreferrer">点击访问</a></div> */}
-            {/* <div>服务器地址：<a className='link link-primary' */}
-            {/*                   onClick={() => setServerUrlValue('https://api.openai-up.com')} */}
-            {/*                   rel='noreferrer'>点击设置</a></div> */}
-            {/* <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div> */}
+            <div className='flex justify-center font-semibold'>【第三方国内代理】</div>
+            <div>代理网址：<a className='link link-primary' href='https://api.kksj.org/register?aff=ucVc'
+                             target='_blank'
+                             rel="noreferrer">点击访问</a></div>
+            <div>服务器地址：<a className='link link-primary'
+                               onClick={() => setServerUrlValue('https://api.kksj.org')}
+                               rel='noreferrer'>点击设置</a></div>
+            <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前0.9人民币可充值1美元(约官方价格1/8)<FaGripfire/></div>
+            <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>国内可访问，无需🪜<FaGripfire/></div>
           </div>
         </div>}
         {(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>

src/redux/envReducer.ts

@@ -32,7 +32,8 @@ interface EnvState {
   segments?: Segment[]
   url?: string
   title?: string
-
+  ctime?: number | null
+  author?: string
   taskIds?: string[]
   transResults: { [key: number]: TransResult }
   lastTransTime?: number
@@ -271,6 +272,12 @@ export const slice = createSlice({
     setTitle: (state, action: PayloadAction<string | undefined>) => {
       state.title = action.payload
     },
+    setCtime: (state, action: PayloadAction<number | null | undefined>) => {
+      state.ctime = action.payload
+    },
+    setAuthor: (state, action: PayloadAction<string | undefined>) => {
+      state.author = action.payload
+    },
     setInfos: (state, action: PayloadAction<any[]>) => {
       state.infos = action.payload
     },
@@ -342,6 +349,8 @@ export const {
   addAskInfo,
   delAskInfo,
   mergeAskInfo,
+  setCtime,
+  setAuthor,
 } = slice.actions
 
 export default slice.reducer

src/typings.d.ts

@@ -151,4 +151,13 @@ interface BriefSummary extends Summary {
 }
 
 type SummaryStatus = 'init' | 'pending' | 'done'
-type SummaryType = 'overview' | 'keypoint' | 'brief' | 'question'
+type SummaryType = 'overview' | 'keypoint' | 'brief' | 'question' | 'debate'
+
+interface DebateMessage {
+  side: 'pro' | 'con';
+  content: string;
+}
+
+interface DebateProps {
+  messages: DebateMessage[];
+}

src/utils/bizUtil.ts

@@ -81,6 +81,9 @@ export const isSummaryEmpty = (summary: Summary) => {
   } else if (summary.type === 'question') {
     const content: any[] = summary.content??[]
     return content.length === 0
+  } else if (summary.type === 'debate') {
+    const content: Array<{ side: string, content: string }> = summary.content ?? []
+    return content.length === 0
   }
   return true
 }
@@ -107,20 +110,15 @@ export const getSummaryStr = (summary: Summary) => {
     s += content.map(item => {
       return item.q + '\n' + item.a + '\n'
     }).join('\n')
-  }
+  } else if (summary.type === 'debate') {
+    const content: Array<{ side: string, content: string }> = summary.content ?? []
+    s += content.map(item => {
+      return (item.side === 'pro'?'正方：':'反方：') + item.content + '\n'
+    }).join('\n')
+  } 
   return s
 }
 
-export const getServerUrl = (serverUrl?: string) => {
-  if (!serverUrl) {
-    return 'https://api.openai.com'
-  }
-  if (serverUrl.endsWith('/')) {
-    serverUrl = serverUrl.slice(0, -1)
-  }
-  return serverUrl
-}
-
 export const getModel = (envData: EnvData) => {
   if (envData.model === 'custom') {
     return envData.customModel

tailwind.config.cjs

@@ -3,7 +3,11 @@ module.exports = {
   darkMode: 'class',
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontSize: {
+        xs: '13px',
+      },
+    },
   },
   plugins: [
     require('tailwind-scrollbar-hide'),