提问优化

2024-05-27 10:12:55 +08:00
parent 64059f71e5
commit 4a6ebf0894
5 changed files with 148 additions and 99 deletions
--- a/src/biz/Ask.tsx
+++ b/src/biz/Ask.tsx
@@ -0,0 +1,72 @@
+import {AiOutlineCloseCircle, BsDashSquare, BsPlusSquare, FaQuestion} from 'react-icons/all'
+import classNames from 'classnames'
+import Markdown from '../components/Markdown'
+import React, {useCallback} from 'react'
+import {delAskInfo, mergeAskInfo, setPage} from '../redux/envReducer'
+import {useAppDispatch, useAppSelector} from '../hooks/redux'
+import {PAGE_SETTINGS} from '../const'
+import toast from 'react-hot-toast'
+import useTranslate from '../hooks/useTranslate'
+
+const Ask = (props: {
+  ask: AskInfo
+}) => {
+  const {ask} = props
+  const dispatch = useAppDispatch()
+  const envData = useAppSelector(state => state.env.envData)
+  const fontSize = useAppSelector(state => state.env.envData.fontSize)
+  const segments = useAppSelector(state => state.env.segments)
+  const {addAskTask} = useTranslate()
+
+  const onRegenerate = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
+    if (apiKey) {
+      if (segments != null && segments.length > 0) {
+        addAskTask(ask.id, segments[0], ask.question).catch(console.error)
+      }
+    } else {
+      dispatch(setPage(PAGE_SETTINGS))
+      toast.error('需要先设置ApiKey!')
+    }
+  }, [addAskTask, ask.id, ask.question, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
+
+  const onAskFold = useCallback(() => {
+    dispatch(mergeAskInfo({
+      id: ask.id,
+      fold: !ask.fold
+    }))
+  }, [ask, dispatch])
+
+  const onClose = useCallback(() => {
+    dispatch(delAskInfo(ask.id))
+  }, [ask, dispatch])
+
+  return <div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
+    <div className='w-full relative flex justify-center min-h-[20px]'>
+      <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
+        {ask.fold
+          ? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
+          <BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
+      </div>
+      <button className='absolute right-0 top-0 bottom-0 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClose}>
+        <AiOutlineCloseCircle/>
+      </button>
+      <div className="tabs">
+        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+        <a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
+        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+      </div>
+    </div>
+    {!ask.fold && ask.question && <div className='text-sm font-medium max-w-[90%]'>{ask.question}</div>}
+    {!ask.fold && ask.content &&
+      <div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
+        <Markdown content={ask.content}/>
+      </div>}
+    {!ask.fold && <button disabled={ask.status !== 'done'}
+                         className={classNames('btn btn-link btn-xs', ask.status === 'pending' && 'loading')}
+                         onClick={onRegenerate}>{ask.status === 'pending' ? '生成中' : '重新生成'}</button>}
+    {!ask.fold && ask.error && <div className='text-xs text-error'>{ask.error}</div>}
+  </div>
+}
+
+export default Ask
--- a/src/biz/Body.tsx
+++ b/src/biz/Body.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useMemo, useRef} from 'react'
 import {
-  setAskFold,
-  setAskQuestion,
+  addAskInfo,
+  mergeAskInfo,
  setAutoScroll,
  setAutoTranslate,
  setCheckAutoScroll,
@@ -16,9 +16,6 @@ import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {
  AiOutlineAim,
  AiOutlineCloseCircle,
-  BsDashSquare,
-  BsPlusSquare,
-  FaQuestion,
  FaRegArrowAltCircleDown,
  IoWarning,
  MdExpand,
@@ -37,10 +34,10 @@ import {
 } from '../const'
 import {FaClipboardList} from 'react-icons/fa'
 import useTranslate from '../hooks/useTranslate'
-import {getSummarize} from '../util/biz_util'
 import {openUrl} from '@kky002/kky-util'
-import Markdown from '../components/Markdown'
 import useKeyService from '../hooks/useKeyService'
+import Ask from './Ask'
+import {v4} from 'uuid'

 const Body = () => {
  const dispatch = useAppDispatch()
@@ -57,20 +54,16 @@ const Body = () => {
  const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
  const {addSummarizeTask, addAskTask} = useTranslate()
  // const infos = useAppSelector(state => state.env.infos)
-  const askFold = useAppSelector(state => state.env.askFold)
-  const askQuestion = useAppSelector(state => state.env.askQuestion)
-  const askContent = useAppSelector(state => state.env.askContent)
-  const askStatus = useAppSelector(state => state.env.askStatus)
-  const askError = useAppSelector(state => state.env.askError)
  const bodyRef = useRef<any>()
  const curOffsetTop = useAppSelector(state => state.env.curOffsetTop)
  const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
  const needScroll = useAppSelector(state => state.env.needScroll)
  const totalHeight = useAppSelector(state => state.env.totalHeight)
  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
-  const title = useAppSelector(state => state.env.title)
-  const fontSize = useAppSelector(state => state.env.envData.fontSize)
+  // const title = useAppSelector(state => state.env.title)
+  // const fontSize = useAppSelector(state => state.env.envData.fontSize)
  const searchText = useAppSelector(state => state.env.searchText)
+  const asks = useAppSelector(state => state.env.asks)
  // const recommendIdx = useMemo(() => random(0, 3), [])
  const showSearchInput = useMemo(() => {
    return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
@@ -135,14 +128,19 @@ const Body = () => {

  const onFoldAll = useCallback(() => {
    dispatch(setFoldAll(!foldAll))
-    dispatch(setAskFold(!foldAll))
+    for (const ask of asks) {
+      dispatch(mergeAskInfo({
+        id: ask.id,
+        fold: !foldAll
+      }))
+    }
    for (const segment of segments ?? []) {
      dispatch(setSegmentFold({
        segmentStartIdx: segment.startIdx,
        fold: !foldAll
      }))
    }
-  }, [dispatch, foldAll, segments])
+  }, [asks, dispatch, foldAll, segments])

  const toggleAutoTranslateCallback = useCallback(() => {
    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
@@ -165,14 +163,14 @@ const Body = () => {
    }
  }, [autoScroll, dispatch])

-  const onCopy = useCallback(() => {
-    const [success, content] = getSummarize(title, segments, curSummaryType)
-    if (success) {
-      navigator.clipboard.writeText(content).then(() => {
-        toast.success('复制成功')
-      }).catch(console.error)
-    }
-  }, [curSummaryType, segments, title])
+  // const onCopy = useCallback(() => {
+  //   const [success, content] = getSummarize(title, segments, curSummaryType)
+  //   if (success) {
+  //     navigator.clipboard.writeText(content).then(() => {
+  //       toast.success('复制成功')
+  //     }).catch(console.error)
+  //   }
+  // }, [curSummaryType, segments, title])

  const onSearchTextChange = useCallback((e: any) => {
    const searchText = e.target.value
@@ -188,8 +186,14 @@ const Body = () => {
      const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
      if (apiKey) {
        if (segments != null && segments.length > 0) {
-          dispatch(setAskQuestion(searchText))
-          addAskTask(segments[0], searchText).catch(console.error)
+          const id = v4()
+          addAskTask(id, segments[0], searchText).catch(console.error)
+          // 添加ask
+          dispatch(addAskInfo({
+            id,
+            question: searchText,
+            status: 'pending',
+          }))
        }
      } else {
        dispatch(setPage(PAGE_SETTINGS))
@@ -198,14 +202,6 @@ const Body = () => {
    }
  }, [addAskTask, dispatch, envData.aiType, envData.apiKey, envData.askEnabled, envData.geminiApiKey, searchText, segments])

-  const onSetAsk = useCallback(() => {
-    dispatch(setSearchText(askQuestion??''))
-  }, [askQuestion, dispatch])
-
-  const onAskFold = useCallback(() => {
-    dispatch(setAskFold(!askFold))
-  }, [askFold, dispatch])
-
  // service
  useKeyService()

@@ -282,33 +278,8 @@ const Body = () => {
           height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
         }}
    >
-      {/* ask */}
-      {(envData.askEnabled ?? ASK_ENABLED_DEFAULT) && (searchText || askQuestion) &&
-        <div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
-          <div className='w-full relative flex justify-center min-h-[20px]'>
-            <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
-              {askFold
-                ? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
-                <BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
-            </div>
-            <div className="tabs">
-              <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
-              <a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
-              <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
-            </div>
-          </div>
-          {!askFold && askQuestion &&
-            <div className='link link-hover text-sm font-medium max-w-[90%]' onClick={onSetAsk}>{askQuestion}</div>}
-          {!askFold && askContent &&
-            <div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
-              <Markdown content={askContent}/>
-            </div>}
-          {!askFold && <button disabled={askStatus === 'pending'}
-                               className={classNames('btn btn-link btn-xs', askStatus === 'pending' && 'loading')}
-                               onClick={onAsk}>{askStatus === 'init' ? '点击提问' : (askStatus === 'pending' ? '生成中' : '重新生成')}</button>}
-          {!askFold && askStatus === 'init' && <div className='desc-lighter text-xs'>提问举例：这个视频说了什么</div>}
-          {!askFold && askError && <div className='text-xs text-error'>{askError}</div>}
-        </div>}
+      {/* asks */}
+      {asks.map(ask => <Ask key={ask.id} ask={ask}/>)}

      {/* segments */}
      {segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment}
--- a/src/hooks/useTranslate.ts
+++ b/src/hooks/useTranslate.ts
@@ -4,9 +4,7 @@ import {
  addTaskId,
  addTransResults,
  delTaskId,
-  setAskContent,
-  setAskError,
-  setAskStatus,
+  mergeAskInfo,
  setLastSummarizeTime,
  setLastTransTime,
  setSummaryContent,
@@ -199,7 +197,7 @@ const useTranslate = () => {
    }
  }, [dispatch, envData, summarizeLanguage.name, title])

-  const addAskTask = useCallback(async (segment: Segment, question: string) => {
+  const addAskTask = useCallback(async (id: string, segment: Segment, question: string) => {
    if (segment.text.length >= SUMMARIZE_THRESHOLD) {
      let prompt: string = envData.prompts?.[PROMPT_TYPE_ASK]??PROMPT_DEFAULTS[PROMPT_TYPE_ASK]
      // replace params
@@ -243,10 +241,14 @@ const useTranslate = () => {
          // startIdx: segment.startIdx,
          apiKey: envData.apiKey,
          geminiApiKey: envData.geminiApiKey,
+          askId: id,
        }
      }
      console.debug('addAskTask', taskDef)
-      dispatch(setAskStatus({status: 'pending'}))
+      dispatch(mergeAskInfo({
+        id,
+        status: 'pending'
+      }))
      const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
      dispatch(addTaskId(task.id))
    }
@@ -304,9 +306,13 @@ const useTranslate = () => {
  })

  const handleAsk = useMemoizedFn((task: Task, content?: string) => {
-    dispatch(setAskContent({content}))
-    dispatch(setAskStatus({status: 'done'}))
-    dispatch(setAskError({error: task.error}))
+    dispatch(mergeAskInfo({
+      id: task.def.extra.askId,
+      content,
+      status: 'done',
+      error: task.error,
+    }))
+
    console.debug('setAsk', content, task.error)
  })

--- a/src/redux/envReducer.ts
+++ b/src/redux/envReducer.ts
@@ -1,5 +1,5 @@
 import {createSlice, PayloadAction} from '@reduxjs/toolkit'
-import {find} from 'lodash-es'
+import {find, findIndex} from 'lodash-es'
 import {getDevData} from '../util/biz_util'
 import {DEFAULT_SERVER_URL_OPENAI, TOTAL_HEIGHT_DEF} from '../const'

@@ -39,11 +39,7 @@ interface EnvState {
  lastSummarizeTime?: number

  // ask
-  askFold?: boolean
-  askQuestion?: string
-  askStatus: SummaryStatus
-  askError?: string
-  askContent?: string
+  asks: AskInfo[]

  /**
   * 是否输入中（中文）
@@ -66,7 +62,6 @@ const initialState: EnvState = {
  tempData: {
    curSummaryType: 'overview',
  },
-  askStatus: 'init',
  totalHeight: TOTAL_HEIGHT_DEF,
  autoScroll: true,
  currentTime: import.meta.env.VITE_ENV === 'web-dev' ? 30 : undefined,
@@ -80,6 +75,8 @@ const initialState: EnvState = {

  searchText: '',
  searchResult: new Set(),
+
+  asks: [],
 }

 export const slice = createSlice({
@@ -211,26 +208,20 @@ export const slice = createSlice({
        }
      }
    },
-    setAskFold: (state, action: PayloadAction<boolean>) => {
-      state.askFold = action.payload
+    addAskInfo: (state, action: PayloadAction<AskInfo>) => {
+      state.asks.push(action.payload)
    },
-    setAskQuestion: (state, action: PayloadAction<string | undefined>) => {
-      state.askQuestion = action.payload
+    delAskInfo: (state, action: PayloadAction<string>) => {
+      state.asks = state.asks.filter(ask => ask.id !== action.payload)
    },
-    setAskContent: (state, action: PayloadAction<{
-      content?: any
-    }>) => {
-      state.askContent = action.payload.content
-    },
-    setAskStatus: (state, action: PayloadAction<{
-      status: SummaryStatus
-    }>) => {
-      state.askStatus = action.payload.status
-    },
-    setAskError: (state, action: PayloadAction<{
-      error?: string
-    }>) => {
-      state.askError = action.payload.error
+    mergeAskInfo: (state, action: PayloadAction<PartialOfAskInfo>) => {
+      const idx = findIndex(state.asks, {id: action.payload.id})
+      if (idx >= 0) {
+        state.asks[idx] = {
+          ...state.asks[idx],
+          ...action.payload,
+        }
+      }
    },
    setSegmentFold: (state, action: PayloadAction<{
      segmentStartIdx: number
@@ -303,11 +294,6 @@ export const slice = createSlice({

 export const {
  setUrl,
-  setAskFold,
-  setAskQuestion,
-  setAskStatus,
-  setAskError,
-  setAskContent,
  setTempReady,
  setTempData,
  setUploadedTranscript,
@@ -346,6 +332,9 @@ export const {
  setSearchText,
  setSearchResult,
  setInputting,
+  addAskInfo,
+  delAskInfo,
+  mergeAskInfo,
 } = slice.actions

 export default slice.reducer
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -105,6 +105,17 @@ interface Summary {
  content?: any
 }

+interface AskInfo {
+  id: string
+  fold?: boolean
+  question: string
+  status: SummaryStatus
+  error?: string
+  content?: string
+}
+
+type PartialOfAskInfo = Partial<PartOfAskInfo>
+
 /**
 * 概览
 */