mirror of https://github.com/langgenius/dify.git
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import type { FC } from 'react'
|
|
import { useState } from 'react'
|
|
import type { NodeProps } from 'reactflow'
|
|
import InfoPanel from '../_base/components/info-panel'
|
|
import { NodeSourceHandle } from '../_base/components/node-handle'
|
|
import { mockData } from './mock'
|
|
import {
|
|
useTextGenerationCurrentProviderAndModelAndModelList,
|
|
} from '@/app/components/header/account-setting/model-provider-page/hooks'
|
|
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
|
|
|
|
const Node: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
|
|
const { provider, name: modelId } = mockData.model
|
|
const tempTopics = mockData.topics
|
|
const [topics, setTopics] = useState(tempTopics)
|
|
const {
|
|
textGenerationModelList,
|
|
} = useTextGenerationCurrentProviderAndModelAndModelList()
|
|
return (
|
|
<div className='px-3'>
|
|
<ModelSelector
|
|
defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
|
|
modelList={textGenerationModelList}
|
|
readonly
|
|
/>
|
|
<div className='mt-2 space-y-0.5'>
|
|
{topics.map(topic => (
|
|
<div
|
|
key={topic.id}
|
|
className='relative'
|
|
>
|
|
<InfoPanel
|
|
title={topic.name}
|
|
content={topic.topic}
|
|
/>
|
|
<NodeSourceHandle
|
|
{...props}
|
|
handleId={topic.name}
|
|
handleClassName='!top-[11px] !-right-[21px]'
|
|
/>
|
|
</div>
|
|
))}
|
|
{/* For test */}
|
|
<div
|
|
className='mt-1 flex items-center h-6 justify-center bg-gray-100 rounded-md px-1 space-x-1 text-xs font-normal text-gray-700'
|
|
onClick={() => {
|
|
setTopics([...topics, {
|
|
id: `${Date.now()}`,
|
|
name: `Topic${topics.length}`,
|
|
topic: `Topic${topics.length}`,
|
|
}])
|
|
}}
|
|
>Add</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Node
|