completion debug & preview

2025-08-18 12:05:52 +08:00 · 2024-09-01 11:24:54 +08:00 · 2024-09-01 11:24:54 +08:00 · 8c785e268b
commit 8c785e268b
parent 65a6265ff6
9 changed files with 206 additions and 197 deletions
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@ -8,6 +8,7 @@ import { useBoolean } from 'ahooks'
 import {
  RiAddLine,
  RiEqualizer2Line,
+  RiSparklingFill,
 } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
@ -47,6 +48,7 @@ import { useProviderContext } from '@/context/provider-context'
 import AgentLogModal from '@/app/components/base/agent-log-modal'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { useFeatures } from '@/app/components/base/features/hooks'

 type IDebug = {
  isAPIKeySet: boolean
@ -82,8 +84,8 @@ const Debug: FC<IDebug> = ({
    speechToTextConfig,
    textToSpeechConfig,
    citationConfig,
-    moderationConfig,
-    moreLikeThisConfig,
+    // moderationConfig,
+    // moreLikeThisConfig,
    formattingChanged,
    setFormattingChanged,
    dataSets,
@ -200,6 +202,7 @@ const Debug: FC<IDebug> = ({

  const [completionRes, setCompletionRes] = useState('')
  const [messageId, setMessageId] = useState<string | null>(null)
+  const features = useFeatures(s => s.features)

  const sendTextCompletion = async () => {
    if (isResponding) {
@ -230,36 +233,33 @@ const Debug: FC<IDebug> = ({
      completion_prompt_config: {},
      user_input_form: promptVariablesToUserInputsForm(modelConfig.configs.prompt_variables),
      dataset_query_variable: contextVar || '',
-      opening_statement: introduction,
-      suggested_questions_after_answer: suggestedQuestionsAfterAnswerConfig,
-      speech_to_text: speechToTextConfig,
-      retriever_resource: citationConfig,
-      sensitive_word_avoidance: moderationConfig,
-      more_like_this: moreLikeThisConfig,
-      model: {
-        provider: modelConfig.provider,
-        name: modelConfig.model_id,
-        mode: modelConfig.mode,
-        completion_params: completionParams as any,
-      },
-      text_to_speech: {
-        enabled: false,
-        voice: '',
-        language: '',
-      },
-      agent_mode: {
-        enabled: false,
-        tools: [],
-      },
      dataset_configs: {
        ...datasetConfigs,
        datasets: {
          datasets: [...postDatasets],
        } as any,
      },
+      agent_mode: {
+        enabled: false,
+        tools: [],
+      },
+      model: {
+        provider: modelConfig.provider,
+        name: modelConfig.model_id,
+        mode: modelConfig.mode,
+        completion_params: completionParams as any,
+      },
+      more_like_this: features.moreLikeThis as any,
+      sensitive_word_avoidance: features.moderation as any,
+      text_to_speech: features.text2speech as any,
+      // ##TODO## file_upload
      file_upload: {
        image: visionConfig,
      },
+      opening_statement: introduction,
+      suggested_questions_after_answer: suggestedQuestionsAfterAnswerConfig,
+      speech_to_text: speechToTextConfig,
+      retriever_resource: citationConfig,
    }

    if (isAdvancedMode) {
@ -449,7 +449,6 @@ const Debug: FC<IDebug> = ({
            <ChatUserInput inputs={inputs} />
          </div>
        )}
-        {/* ##TODO## new style of completion */}
        {mode === AppType.completion && (
          <PromptValuePanel
            appType={mode as AppType}
@ -509,26 +508,36 @@ const Debug: FC<IDebug> = ({
            )}
            {/* Text  Generation */}
            {mode === AppType.completion && (
-              <div className="mt-6 px-3 pb-4">
-                <GroupName name={t('appDebug.result')} />
+              <>
                {(completionRes || isResponding) && (
-                  <TextGeneration
-                    className="mt-2"
-                    content={completionRes}
-                    isLoading={!completionRes && isResponding}
-                    isShowTextToSpeech={textToSpeechConfig.enabled && !!text2speechDefaultModel}
-                    isResponding={isResponding}
-                    isInstalledApp={false}
-                    messageId={messageId}
-                    isError={false}
-                    onRetry={() => { }}
-                    supportAnnotation
-                    appId={appId}
-                    varList={varList}
-                    siteInfo={null}
-                  />
+                  <>
+                    <div className='mx-4 mt-3'><GroupName name={t('appDebug.result')} /></div>
+                    <div className='mx-3 mb-8'>
+                      <TextGeneration
+                        className="mt-2"
+                        content={completionRes}
+                        isLoading={!completionRes && isResponding}
+                        isShowTextToSpeech={textToSpeechConfig.enabled && !!text2speechDefaultModel}
+                        isResponding={isResponding}
+                        isInstalledApp={false}
+                        messageId={messageId}
+                        isError={false}
+                        onRetry={() => { }}
+                        supportAnnotation
+                        appId={appId}
+                        varList={varList}
+                        siteInfo={null}
+                      />
+                    </div>
+                  </>
                )}
-              </div>
+                {!completionRes && !isResponding && (
+                  <div className='grow flex flex-col items-center justify-center gap-2'>
+                    <RiSparklingFill className='w-12 h-12 text-text-empty-state-icon' />
+                    <div className='text-text-quaternary system-sm-regular'>{t('appDebug.noResult')}</div>
+                  </div>
+                )}
+              </>
            )}
            {mode === AppType.completion && showPromptLogModal && (
              <PromptLogModal
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@ -1,25 +1,27 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import {
  RiArrowDownSLine,
-  RiArrowRightLine,
+  RiArrowRightSLine,
+  RiPlayLargeFill,
 } from '@remixicon/react'
-import {
-  PlayIcon,
-} from '@heroicons/react/24/solid'
 import ConfigContext from '@/context/debug-configuration'
-import type { Inputs, PromptVariable } from '@/models/debug'
+import type { Inputs } from '@/models/debug'
 import { AppType, ModelModeType } from '@/types/app'
 import Select from '@/app/components/base/select'
-import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
+import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { DEFAULT_VALUE_MAX_LEN } from '@/config'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import cn from '@/utils/classnames'

 export type IPromptValuePanelProps = {
  appType: AppType
@ -43,15 +45,15 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
    return key && key?.trim() && name && name?.trim()
  })

-  const promptVariableObj = (() => {
+  const promptVariableObj = useMemo(() => {
    const obj: Record<string, boolean> = {}
    promptVariables.forEach((input) => {
      obj[input.key] = true
    })
    return obj
-  })()
+  }, [promptVariables])

-  const canNotRun = (() => {
+  const canNotRun = useMemo(() => {
    if (mode !== AppType.completion)
      return true

@ -62,19 +64,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
    }

    else { return !modelConfig.configs.prompt_template }
-  })()
-  const renderRunButton = () => {
-    return (
-      <Button
-        variant="primary"
-        disabled={canNotRun}
-        onClick={() => onSend && onSend()}
-        className="w-[80px] !h-8">
-        <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
-        <span className='uppercase text-[13px]'>{t('appDebug.inputs.run')}</span>
-      </Button>
-    )
-  }
+  }, [chatPromptConfig.prompt, completionPromptConfig.prompt?.text, isAdvancedMode, mode, modelConfig.configs.prompt_template, modelModeType])
+
  const handleInputValueChange = (key: string, value: string) => {
    if (!(key in promptVariableObj))
      return
@ -95,142 +86,129 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
    setInputs(newInputs)
  }

+  const setShowAppConfigureFeaturesModal = useAppStore(s => s.setShowAppConfigureFeaturesModal)
+
  return (
-    <div className="pb-3 border border-gray-200 bg-white rounded-xl" style={{
-      boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
-    }}>
-      <div className={'mt-3 px-4 bg-white'}>
-        <div className={
-          `${!userInputFieldCollapse && 'mb-2'}`
-        }>
-          <div className='flex items-center space-x-1 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
-            {
-              userInputFieldCollapse
-                ? <RiArrowRightLine className='w-3 h-3 text-gray-300' />
-                : <RiArrowDownSLine className='w-3 h-3 text-gray-300' />
-            }
-            <div className='text-xs font-medium text-gray-800 uppercase'>{t('appDebug.inputs.userInputField')}</div>
+    <>
+      <div className='relative z-[1] mx-3 border-[0.5px] bg-components-panel-on-panel-item-bg border-components-panel-border-subtle rounded-xl shadow-md'>
+        <div className={cn('px-4 pt-3', userInputFieldCollapse ? 'pb-3' : 'pb-1')}>
+          <div className='flex items-center gap-0.5 py-0.5 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
+            <div className='text-text-secondary system-md-semibold-uppercase'>{t('appDebug.inputs.userInputField')}</div>
+            {userInputFieldCollapse && <RiArrowRightSLine className='w-4 h-4 text-text-secondary'/>}
+            {!userInputFieldCollapse && <RiArrowDownSLine className='w-4 h-4 text-text-secondary'/>}
          </div>
-          {appType === AppType.completion && promptVariables.length > 0 && !userInputFieldCollapse && (
-            <div className="mt-1 text-xs leading-normal text-gray-500">{t('appDebug.inputs.completionVarTip')}</div>
+          {!userInputFieldCollapse && (
+            <div className='mt-1 text-text-tertiary system-xs-regular'>{t('appDebug.inputs.completionVarTip')}</div>
          )}
        </div>
-        {!userInputFieldCollapse && (
-          <>
-            {
-              promptVariables.length > 0
-                ? (
-                  <div className="space-y-3 ">
-                    {promptVariables.map(({ key, name, type, options, max_length, required }) => (
-                      <div key={key} className="xl:flex justify-between">
-                        <div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-gray-900">{name || key}</div>
-                        {type === 'select' && (
-                          <Select
-                            className='w-full'
-                            defaultValue={inputs[key] as string}
-                            onSelect={(i) => { handleInputValueChange(key, i.value as string) }}
-                            items={(options || []).map(i => ({ name: i, value: i }))}
-                            allowSearch={false}
-                            bgClassName='bg-gray-50'
-                          />
-                        )
-                        }
-                        {type === 'string' && (
-                          <input
-                            className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                            placeholder={`${name}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
-                            type="text"
-                            value={inputs[key] ? `${inputs[key]}` : ''}
-                            onChange={(e) => { handleInputValueChange(key, e.target.value) }}
-                            maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
-                          />
-                        )}
-                        {type === 'paragraph' && (
-                          <Textarea
-                            className='grow h-[120px]'
-                            placeholder={`${name}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
-                            value={inputs[key] ? `${inputs[key]}` : ''}
-                            onChange={(e) => { handleInputValueChange(key, e.target.value) }}
-                          />
-                        )}
-                        {type === 'number' && (
-                          <input
-                            className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                            placeholder={`${name}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
-                            type="number"
-                            value={inputs[key] ? `${inputs[key]}` : ''}
-                            onChange={(e) => { handleInputValueChange(key, e.target.value) }}
-                          />
-                        )}
-                      </div>
-                    ))}
+        {!userInputFieldCollapse && promptVariables.length > 0 && (
+          <div className='px-4 pt-3 pb-4'>
+            {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
+              <div
+                key={key}
+                className='mb-4 last-of-type:mb-0'
+              >
+                <div>
+                  <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+                    <div className='truncate'>{name || key}</div>
+                    {!required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
                  </div>
-                )
-                : (
-                  <div className='text-xs text-gray-500'>{t('appDebug.inputs.noVar')}</div>
-                )
-            }
-            {
-              appType === AppType.completion && visionConfig?.enabled && (
-                <div className="mt-3 xl:flex justify-between">
-                  <div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-gray-900">{t('common.imageUploader.imageUpload')}</div>
                  <div className='grow'>
-                    <TextGenerationImageUploader
-                      settings={visionConfig}
-                      onFilesChange={files => onVisionFilesChange(files.filter(file => file.progress !== -1).map(fileItem => ({
-                        type: 'image',
-                        transfer_method: fileItem.type,
-                        url: fileItem.url,
-                        upload_file_id: fileItem.fileId,
-                      })))}
-                    />
+                    {type === 'string' && (
+                      <Input
+                        value={inputs[key] ? `${inputs[key]}` : ''}
+                        onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                        placeholder={name}
+                        autoFocus={index === 0}
+                        maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                      />
+                    )}
+                    {type === 'paragraph' && (
+                      <Textarea
+                        className='grow h-[120px]'
+                        placeholder={name}
+                        value={inputs[key] ? `${inputs[key]}` : ''}
+                        onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                      />
+                    )}
+                    {type === 'select' && (
+                      <Select
+                        className='w-full'
+                        defaultValue={inputs[key] as string}
+                        onSelect={(i) => { handleInputValueChange(key, i.value as string) }}
+                        items={(options || []).map(i => ({ name: i, value: i }))}
+                        allowSearch={false}
+                        bgClassName='bg-gray-50'
+                      />
+                    )}
+                    {type === 'number' && (
+                      <Input
+                        type='number'
+                        value={inputs[key] ? `${inputs[key]}` : ''}
+                        onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                        placeholder={name}
+                        autoFocus={index === 0}
+                        maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                      />
+                    )}
                  </div>
                </div>
-              )
-            }
-          </>
-        )
-        }
-      </div>
-
-      {
-        appType === AppType.completion && (
-          <div>
-            <div className="mt-5 border-b border-gray-100"></div>
-            <div className="flex justify-between mt-4 px-4">
-              <Button
-                onClick={onClear}
-                disabled={false}
-              >
-                <span className='text-[13px]'>{t('common.operation.clear')}</span>
-              </Button>
-
-              {canNotRun
-                ? (<Tooltip
-                  popupContent={t('appDebug.otherError.promptNoBeEmpty')}
-                  needsDelay
-                >
-                  {renderRunButton()}
-                </Tooltip>)
-                : renderRunButton()}
-            </div>
+              </div>
+            ))}
+            {/* ##TODO## file_upload */}
+            {visionConfig?.enabled && (
+              <div className="mt-3 xl:flex justify-between">
+                <div className="mr-1 py-2 shrink-0 w-[120px] text-sm text-gray-900">{t('common.imageUploader.imageUpload')}</div>
+                <div className='grow'>
+                  <TextGenerationImageUploader
+                    settings={visionConfig}
+                    onFilesChange={files => onVisionFilesChange(files.filter(file => file.progress !== -1).map(fileItem => ({
+                      type: 'image',
+                      transfer_method: fileItem.type,
+                      url: fileItem.url,
+                      upload_file_id: fileItem.fileId,
+                    })))}
+                  />
+                </div>
+              </div>
+            )}
          </div>
-        )
-      }
-    </div>
+        )}
+        {!userInputFieldCollapse && (
+          <div className='flex justify-between p-4 pt-3 border-t border-divider-subtle'>
+            <Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button>
+            {canNotRun && (
+              <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')} needsDelay>
+                <Button
+                  variant="primary"
+                  disabled={canNotRun}
+                  onClick={() => onSend && onSend()}
+                  className="w-[96px]">
+                  <RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" />
+                  {t('appDebug.inputs.run')}
+                </Button>
+              </Tooltip>
+            )}
+            {!canNotRun && (
+              <Button
+                variant="primary"
+                disabled={canNotRun}
+                onClick={() => onSend && onSend()}
+                className="w-[96px]">
+                <RiPlayLargeFill className="shrink-0 w-4 h-4 mr-0.5" aria-hidden="true" />
+                {t('appDebug.inputs.run')}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+      <div className='mx-3'>
+        <FeatureBar
+          isChatMode={appType !== AppType.completion}
+          onFeatureBarClick={setShowAppConfigureFeaturesModal} />
+      </div>
+    </>
  )
 }

 export default React.memo(PromptValuePanel)
-
-export function replaceStringWithValues(str: string, promptVariables: PromptVariable[], inputs: Record<string, any>) {
-  return str.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
-    const name = inputs[key]
-    if (name) { // has set value
-      return name
-    }
-
-    const valueObj: PromptVariable | undefined = promptVariables.find(v => v.key === key)
-    return valueObj ? `{{${valueObj.name}}}` : match
-  })
-}
--- a/web/app/components/app/configuration/prompt-value-panel/utils.ts
+++ b/web/app/components/app/configuration/prompt-value-panel/utils.ts
@ -0,0 +1,13 @@
+import type { PromptVariable } from '@/models/debug'
+
+export function replaceStringWithValues(str: string, promptVariables: PromptVariable[], inputs: Record<string, any>) {
+  return str.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
+    const name = inputs[key]
+    if (name) { // has set value
+      return name
+    }
+
+    const valueObj: PromptVariable | undefined = promptVariables.find(v => v.key === key)
+    return valueObj ? `{{${valueObj.name}}}` : match
+  })
+}
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@ -18,7 +18,7 @@ import type {
 import { TransferMethod } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
 import { ssePost } from '@/service/base'
-import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
+import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel/utils'
 import type { Annotation } from '@/models/log'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import useTimestamp from '@/hooks/use-timestamp'
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@ -9,11 +9,13 @@ import { useFeatures } from '@/app/components/base/features/hooks'
 import cn from '@/utils/classnames'

 type Props = {
+  isChatMode?: boolean
  disabled?: boolean
  onFeatureBarClick?: (state: boolean) => void
 }

 const FeatureBar = ({
+  isChatMode = true,
  disabled,
  onFeatureBarClick,
 }: Props) => {
@ -22,8 +24,13 @@ const FeatureBar = ({
  const [modalOpen, setModalOpen] = useState(false)

  const noFeatureEnabled = useMemo(() => {
-    return !Object.values(features).some(f => f.enabled)
-  }, [features])
+    // completion app citation is always true but not enabled for setting
+    const data = {
+      ...features,
+      citation: { enabled: isChatMode ? features.citation?.enabled : false },
+    }
+    return !Object.values(data).some(f => f.enabled)
+  }, [features, isChatMode])

  return (
    <div className='-translate-y-2 m-1 mt-0 px-2.5 py-2 pt-4 bg-util-colors-indigo-indigo-50 rounded-b-[10px] border-l border-b border-r border-components-panel-border-subtle'>
@ -102,7 +109,7 @@ const FeatureBar = ({
                </div>
              </Tooltip>
            )}
-            {!!features.citation?.enabled && (
+            {isChatMode && !!features.citation?.enabled && (
              <Tooltip
                popupContent={t('appDebug.feature.citation.title')}
              >
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@ -16,7 +16,7 @@ import type {
 import { useToastContext } from '@/app/components/base/toast'
 import { TransferMethod } from '@/types/app'
 import type { VisionFile } from '@/types/app'
-import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
+import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel/utils'

 type GetAbortController = (abortController: AbortController) => void
 type SendCallback = {
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@ -437,6 +437,7 @@ const translation = {
    run: 'RUN',
  },
  result: 'Output Text',
+  noResult: 'Output will be displayed here.',
  datasetConfig: {
    settingTitle: 'Retrieval settings',
    knowledgeTip: 'Click the “+” button to add knowledge',
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@ -430,6 +430,7 @@ const translation = {
    run: '运行',
  },
  result: '结果',
+  noResult: '输出结果展示在这',
  datasetConfig: {
    settingTitle: '召回设置',
    knowledgeTip: '点击 “+” 按钮添加知识库',
--- a/web/types/app.ts
+++ b/web/types/app.ts
@ -212,7 +212,7 @@ export type ModelConfig = {
  user_input_form: UserInputFormItem[]
  dataset_query_variable?: string
  more_like_this: {
-    enabled: boolean
+    enabled?: boolean
  }
  suggested_questions_after_answer: {
    enabled: boolean