AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 16:55:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix the tooltip in tools node (#8055)

Browse Source
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
1 changed files with 13 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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