feat: support line break of tooltip content (#7424)

api/core/tools/provider/builtin/jina/tools/jina_tokenizer.yaml

@@ -60,5 +60,11 @@ parameters:
     label:
       en_US: Tokenizer
     human_description:
-      en_US: cl100k_base - gpt-4,gpt-3.5-turbo,gpt-3.5;  o200k_base - gpt-4o,gpt-4o-mini; p50k_base - text-davinci-003,text-davinci-002
+      en_US: |
+        · cl100k_base --- gpt-4, gpt-3.5-turbo, gpt-3.5
+        · o200k_base  --- gpt-4o, gpt-4o-mini
+        · p50k_base   --- text-davinci-003, text-davinci-002
+        · r50k_base   --- text-davinci-001, text-curie-001
+        · p50k_edit   --- text-davinci-edit-001, code-davinci-edit-001
+        · gpt2        --- gpt-2
     form: form

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 import type { FC } from 'react'
 import {
   RiQuestionLine,
@@ -70,6 +70,16 @@ const Form: FC<FormProps> = ({
     onChange({ ...value, [key]: val, ...shouldClearVariable })
   }
 
+  // convert tooltip '\n' to <br />
+  const renderTooltipContent = (content: string) => {
+    return content.split('\n').map((line, index, array) => (
+      <Fragment key={index}>
+        {line}
+        {index < array.length - 1 && <br />}
+      </Fragment>
+    ))
+  }
+
   const renderField = (formSchema: CredentialFormSchema) => {
     const tooltip = formSchema.tooltip
     const tooltipContent = (tooltip && (
@@ -77,7 +87,7 @@ const Form: FC<FormProps> = ({
         <Tooltip popupContent={
           // w-[100px] caused problem
           <div className=''>
-            {tooltip[language] || tooltip.en_US}
+            {renderTooltipContent(tooltip[language] || tooltip.en_US)}
           </div>
         } >
           <RiQuestionLine className='w-3 h-3  text-gray-500' />