fix the tooltip in tools node (#8055)

This commit is contained in:
Yi Xiao 2024-09-06 17:28:22 +08:00 committed by GitHub
parent 89aede80cc
commit d72da2777c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,5 @@
import { Fragment, useState } from 'react'
import { useState } from 'react'
import type { FC } from 'react'
import { RiQuestionLine } from '@remixicon/react'
import { ValidatingTip } from '../../key-validator/ValidateStatus'
import type {
CredentialFormSchema,
@ -68,28 +67,17 @@ 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 && (
<span className='ml-1 pt-1.5'>
<Tooltip popupContent={
// w-[100px] caused problem
<div className=''>
{renderTooltipContent(tooltip[language] || tooltip.en_US)}
</div>
} >
<RiQuestionLine className='w-3 h-3 text-gray-500' />
</Tooltip>
<span className='ml-1'>
<Tooltip
popupContent={
<div className='w-[200px]'>
{tooltip[language] || tooltip.en_US}
</div>}
triggerClassName='w-4 h-4'
/>
</span>))
if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
const {
@ -106,7 +94,7 @@ const Form: FC<FormProps> = ({
const disabed = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
required && (
@ -147,7 +135,7 @@ const Form: FC<FormProps> = ({
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
required && (
@ -203,7 +191,7 @@ const Form: FC<FormProps> = ({
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
@ -247,7 +235,7 @@ const Form: FC<FormProps> = ({
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className='flex items-center justify-between py-2 text-sm text-gray-900'>
<div className='flex items-center space-x-2'>
<span className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>{label[language] || label.en_US}</span>
<span className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>{label[language] || label.en_US}</span>
{
required && (
<span className='ml-1 text-red-500'>*</span>