feat: webapp support paragraph

web/app/components/share/text-generation/config-scence/index.tsx

@@ -8,23 +8,19 @@ import Select from '@/app/components/base/select'
 import type { SiteInfo } from '@/models/share'
 import type { PromptConfig } from '@/models/debug'
 import Button from '@/app/components/base/button'
-import { DEFAULT_VALUE_MAX_LEN } from '@/config'
+import { DEFAULT_PARAGRAPH_VALUE_MAX_LEN, DEFAULT_VALUE_MAX_LEN } from '@/config'
 
 export type IConfigSenceProps = {
   siteInfo: SiteInfo
   promptConfig: PromptConfig
   inputs: Record<string, any>
   onInputsChange: (inputs: Record<string, any>) => void
-  query: string
-  onQueryChange: (query: string) => void
   onSend: () => void
 }
 const ConfigSence: FC<IConfigSenceProps> = ({
   promptConfig,
   inputs,
   onInputsChange,
-  query,
-  onQueryChange,
   onSend,
 }) => {
   const { t } = useTranslation()
@@ -38,61 +34,59 @@ const ConfigSence: FC<IConfigSenceProps> = ({
             <div className='w-full mt-4' key={item.key}>
               <label className='text-gray-900 text-sm font-medium'>{item.name}</label>
               <div className='mt-2'>
-                {item.type === 'select'
-                  ? (
-                    <Select
-                      className='w-full'
-                      defaultValue={inputs[item.key]}
-                      onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }}
-                      items={(item.options || []).map(i => ({ name: i, value: i }))}
-                      allowSearch={false}
-                      bgClassName='bg-gray-50'
-                    />
-                  )
-                  : (
-                    <input
-                      type="text"
-                      className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
-                      placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
-                      value={inputs[item.key]}
-                      onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
-                      maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
-                    />
-                  )}
+                {item.type === 'select' && (
+                  <Select
+                    className='w-full'
+                    defaultValue={inputs[item.key]}
+                    onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }}
+                    items={(item.options || []).map(i => ({ name: i, value: i }))}
+                    allowSearch={false}
+                    bgClassName='bg-gray-50'
+                  />
+                )}
+                {item.type === 'string' && (
+                  <input
+                    type="text"
+                    className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
+                    placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                    value={inputs[item.key]}
+                    onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
+                    maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
+                  />
+                )}
+                {item.type === 'paragraph' && (
+                  <textarea
+                    className="block w-full h-[104px] p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
+                    placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                    value={inputs[item.key]}
+                    onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
+                    maxLength={item.max_length || DEFAULT_PARAGRAPH_VALUE_MAX_LEN}
+                  />
+                )}
               </div>
             </div>
           ))}
           {promptConfig.prompt_variables.length > 0 && (
-            <div className='mt-6 h-[1px] bg-gray-100'></div>
+            <div className='mt-4 h-[1px] bg-gray-100'></div>
           )}
-          <div className='w-full mt-5'>
-            <label className='text-gray-900 text-sm font-medium'>{t('share.generation.queryTitle')}</label>
-            <div className="mt-2 overflow-hidden rounded-lg bg-gray-50 ">
-              <div className="px-4 py-2 bg-gray-50 rounded-t-lg">
-                <textarea
-                  value={query}
-                  onChange={(e) => { onQueryChange(e.target.value) }}
-                  rows={4}
-                  className="w-full px-0 text-sm text-gray-900 border-0 bg-gray-50 focus:outline-none placeholder:bg-gray-50"
-                  placeholder={t('share.generation.queryPlaceholder') as string}
-                  required
-                >
-                </textarea>
-              </div>
-              <div className="flex items-center justify-between px-3 py-2">
-                <div className="flex pl-0 space-x-1 sm:pl-2">
-                  <span className="bg-gray-100 text-gray-500 text-xs font-medium mr-2 px-2.5 py-0.5 rounded cursor-pointer">{query?.length}</span>
-                </div>
-                <Button
-                  type="primary"
-                  className='w-[80px] !h-8 !p-0'
-                  onClick={onSend}
-                  disabled={!query || query === ''}
-                >
-                  <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
-                  <span className='uppercase text-[13px]'>{t('share.generation.run')}</span>
-                </Button>
-              </div>
+          <div className='w-full mt-4'>
+            <div className="flex items-center justify-between">
+              <Button
+                className='w-[58px] !h-8 !p-3'
+                onClick={onSend}
+                disabled={false}
+              >
+                <span className='text-[13px]'>{t('common.operation.clear')}</span>
+              </Button>
+              <Button
+                type="primary"
+                className='!h-8 !pl-3 !pr-4'
+                onClick={onSend}
+                disabled={false}
+              >
+                <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
+                <span className='text-[13px]'>{t('share.generation.run')}</span>
+              </Button>
             </div>
           </div>
         </form>

web/app/components/share/text-generation/index.tsx

@@ -49,7 +49,6 @@ const TextGeneration: FC<IMainProps> = ({
   const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
   const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
   const [isResponsing, { setTrue: setResponsingTrue, setFalse: setResponsingFalse }] = useBoolean(false)
-  const [query, setQuery] = useState('')
   const [completionRes, setCompletionRes] = useState('')
   const { notify } = Toast
   const isNoData = !completionRes
@@ -125,14 +124,8 @@ const TextGeneration: FC<IMainProps> = ({
     if (!checkCanSend())
       return
 
-    if (!query) {
-      logError(t('appDebug.errorMessage.queryRequired'))
-      return false
-    }
-
     const data = {
       inputs,
-      query,
     }
 
     setMessageId(null)
@@ -188,7 +181,11 @@ const TextGeneration: FC<IMainProps> = ({
       changeLanguage(siteInfo.default_language)
 
       const { user_input_form, more_like_this }: any = appParams
-      const prompt_variables = userInputsFormToPromptVariables(user_input_form)
+      // TODO: test paragraph type
+      const prompt_variables = userInputsFormToPromptVariables(user_input_form).map(item => ({
+        ...item,
+        type: 'paragraph',
+      }))
       setPromptConfig({
         prompt_template: '', // placeholder for feture
         prompt_variables,
@@ -331,8 +328,6 @@ const TextGeneration: FC<IMainProps> = ({
                 inputs={inputs}
                 onInputsChange={setInputs}
                 promptConfig={promptConfig}
-                query={query}
-                onQueryChange={setQuery}
                 onSend={handleSend}
               />
             )}

web/i18n/lang/share-app.en.ts

 const translation = {
   common: {
-    welcome: "Welcome to use",
-    appUnavailable: "App is unavailable",
-    appUnkonwError: "App is unavailable"
+    welcome: 'Welcome to use',
+    appUnavailable: 'App is unavailable',
+    appUnkonwError: 'App is unavailable',
   },
   chat: {
-    newChat: "New chat",
-    newChatDefaultName: "New conversation",
-    powerBy: "Powered by",
-    prompt: "Prompt",
-    privatePromptConfigTitle: "Conversation settings",
-    publicPromptConfigTitle: "Initial Prompt",
-    configStatusDes: "Before start, you can modify conversation settings",
+    newChat: 'New chat',
+    newChatDefaultName: 'New conversation',
+    powerBy: 'Powered by',
+    prompt: 'Prompt',
+    privatePromptConfigTitle: 'Conversation settings',
+    publicPromptConfigTitle: 'Initial Prompt',
+    configStatusDes: 'Before start, you can modify conversation settings',
     configDisabled:
-      "Previous session settings have been used for this session.",
-    startChat: "Start Chat",
+      'Previous session settings have been used for this session.',
+    startChat: 'Start Chat',
     privacyPolicyLeft:
-      "Please read the ",
+      'Please read the ',
     privacyPolicyMiddle:
-      "privacy policy",
+      'privacy policy',
     privacyPolicyRight:
-      " provided by the app developer.",
+      ' provided by the app developer.',
   },
   generation: {
     tabs: {
-      create: "Create",
-      saved: "Saved",
+      create: 'Create',
+      saved: 'Saved',
     },
     savedNoData: {
-      title: "You haven't saved a result yet!",
+      title: 'You haven\'t saved a result yet!',
       description: 'Start generating content, and find your saved results here.',
-      startCreateContent: 'Start create content'
+      startCreateContent: 'Start create content',
     },
-    title: "AI Completion",
-    queryTitle: "Query content",
-    queryPlaceholder: "Write your query content...",
-    run: "RUN",
-    copy: "Copy",
-    resultTitle: "AI Completion",
-    noData: "AI will give you what you want here.",
+    title: 'AI Completion',
+    queryTitle: 'Query content',
+    queryPlaceholder: 'Write your query content...',
+    run: 'Execute',
+    copy: 'Copy',
+    resultTitle: 'AI Completion',
+    noData: 'AI will give you what you want here.',
   },
-};
+}
 
-export default translation;
+export default translation

web/i18n/lang/share-app.zh.ts

 const translation = {
   common: {
-    welcome: "欢迎使用",
-    appUnavailable: "应用不可用",
-    appUnkonwError: "应用不可用",
+    welcome: '欢迎使用',
+    appUnavailable: '应用不可用',
+    appUnkonwError: '应用不可用',
   },
   chat: {
-    newChat: "新对话",
-    newChatDefaultName: "新的对话",
-    powerBy: "Powered by",
-    prompt: "提示词",
-    privatePromptConfigTitle: "对话设置",
-    publicPromptConfigTitle: "对话前提示词",
-    configStatusDes: "开始前，您可以修改对话设置",
-    configDisabled: "此次会话已使用上次会话表单",
-    startChat: "开始对话",
-    privacyPolicyLeft: "请阅读由该应用开发者提供的",
-    privacyPolicyMiddle: "隐私政策",
-    privacyPolicyRight: "。",
+    newChat: '新对话',
+    newChatDefaultName: '新的对话',
+    powerBy: 'Powered by',
+    prompt: '提示词',
+    privatePromptConfigTitle: '对话设置',
+    publicPromptConfigTitle: '对话前提示词',
+    configStatusDes: '开始前，您可以修改对话设置',
+    configDisabled: '此次会话已使用上次会话表单',
+    startChat: '开始对话',
+    privacyPolicyLeft: '请阅读由该应用开发者提供的',
+    privacyPolicyMiddle: '隐私政策',
+    privacyPolicyRight: '。',
   },
   generation: {
     tabs: {
-      create: "创建",
-      saved: "已保存",
+      create: '创建',
+      saved: '已保存',
     },
     savedNoData: {
-      title: "您还没有保存结果！",
+      title: '您还没有保存结果！',
       description: '开始生成内容，您可以在这里找到保存的结果。',
-      startCreateContent: '开始生成内容'
+      startCreateContent: '开始生成内容',
     },
-    title: "AI 智能书写",
-    queryTitle: "查询内容",
-    queryPlaceholder: "请输入文本内容",
-    run: "运行",
-    copy: "拷贝",
-    resultTitle: "AI 书写",
-    noData: "AI 会在这里给你惊喜。",
+    title: 'AI 智能书写',
+    queryTitle: '查询内容',
+    queryPlaceholder: '请输入文本内容',
+    run: '运行',
+    copy: '拷贝',
+    resultTitle: 'AI 书写',
+    noData: 'AI 会在这里给你惊喜。',
   },
-};
+}
 
-export default translation;
+export default translation