feat: llm node content

web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx

@@ -74,6 +74,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
                 provider={currentProvider}
                 model={currentModel}
                 className={triggerClassName}
+                readonly={readonly}
               />
             )
           }

web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx

@@ -19,19 +19,22 @@ type ModelTriggerProps = {
   provider: Model
   model: ModelItem
   className?: string
+  readonly?: boolean
 }
 const ModelTrigger: FC<ModelTriggerProps> = ({
   open,
   provider,
   model,
   className,
+  readonly,
 }) => {
   const language = useLanguage()
 
   return (
     <div
       className={`
-        group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
+        group flex items-center px-2 h-8 rounded-lg bg-gray-100 
+        ${!readonly && 'hover:bg-gray-200 cursor-pointer'}
         ${className}
         ${open && '!bg-gray-200'}
         ${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
@@ -48,21 +51,24 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
         showMode
         showFeatures
       />
-      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        {
-          model.status !== ModelStatusEnum.active
-            ? (
-              <TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
-                <AlertTriangle className='w-4 h-4 text-[#F79009]' />
-              </TooltipPlus>
-            )
-            : (
-              <ChevronDown
-                className='w-3.5 h-3.5 text-gray-500'
-              />
-            )
-        }
-      </div>
+      {!readonly && (
+        <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+          {
+            model.status !== ModelStatusEnum.active
+              ? (
+                <TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
+                  <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                </TooltipPlus>
+              )
+              : (
+                <ChevronDown
+                  className='w-3.5 h-3.5 text-gray-500'
+                />
+              )
+          }
+        </div>
+      )}
+
     </div>
   )
 }

web/app/components/workflow/nodes/llm/node.tsx

 import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-const i18nPrefix = 'workflow.nodes.llm'
+import { mockLLMNodeData } 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 = () => {
-  const { t } = useTranslation()
+  const { provider, name: modelId } = mockLLMNodeData.model
+  const {
 
+    textGenerationModelList,
+  } = useTextGenerationCurrentProviderAndModelAndModelList()
   return (
-    <div>llm</div>
+    <div className='px-3'>
+      <ModelSelector
+        defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
+        modelList={textGenerationModelList}
+        readonly
+      />
+    </div>
   )
 }
 

web/app/components/workflow/nodes/llm/panel.tsx

@@ -88,13 +88,6 @@ const Panel: FC = () => {
       >
         Vision
       </Field>
-      {/* This version not support function */}
-      {/* <Field
-          title={t(`${i18nPrefix}.fu`)}
-          inline
-        >
-          Functions
-        </Field> */}
 
       <OutputVars>
         <>