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

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' />