feat: use model dropdown for ChatXAI and add Grok models to catalog

packages/components/models.json

@@ -2193,6 +2193,36 @@
                 }
             ]
         },
+        {
+            "name": "chatXAI",
+            "models": [
+                {
+                    "label": "grok-4",
+                    "name": "grok-4",
+                    "description": "Most capable Grok model with advanced reasoning"
+                },
+                {
+                    "label": "grok-3",
+                    "name": "grok-3",
+                    "description": "Flagship model for enterprise and general-purpose tasks"
+                },
+                {
+                    "label": "grok-3-mini",
+                    "name": "grok-3-mini",
+                    "description": "Lightweight Grok model, faster and more cost-effective"
+                },
+                {
+                    "label": "grok-2-vision-1212",
+                    "name": "grok-2-vision-1212",
+                    "description": "Grok 2 with image understanding"
+                },
+                {
+                    "label": "grok-2-1212",
+                    "name": "grok-2-1212",
+                    "description": "Grok 2 text model"
+                }
+            ]
+        },
         {
             "name": "chatMistralAI",
             "models": [

packages/components/nodes/chatmodels/ChatXAI/ChatXAI.ts

@@ -1,7 +1,8 @@
 import { BaseCache } from '@langchain/core/caches'
 import { ChatXAIInput } from '@langchain/xai'
-import { ICommonObject, IMultiModalOption, INode, INodeData, INodeParams } from '../../../src/Interface'
+import { ICommonObject, IMultiModalOption, INode, INodeData, INodeOptionsValue, INodeParams } from '../../../src/Interface'
 import { getBaseClasses, getCredentialData, getCredentialParam } from '../../../src/utils'
+import { getModels, MODEL_TYPE } from '../../../src/modelLoader'
 import { ChatXAI } from './FlowiseChatXAI'
 
 class ChatXAI_ChatModels implements INode {
@@ -19,7 +20,7 @@ class ChatXAI_ChatModels implements INode {
     constructor() {
         this.label = 'xAI Grok'
         this.name = 'chatXAI'
-        this.version = 2.0
+        this.version = 2.1
         this.type = 'ChatXAI'
         this.icon = 'xai.png'
         this.category = 'Chat Models'
@@ -39,10 +40,12 @@ class ChatXAI_ChatModels implements INode {
                 optional: true
             },
             {
-                label: 'Model',
+                label: 'Model Name',
                 name: 'modelName',
-                type: 'string',
-                placeholder: 'grok-beta'
+                type: 'asyncOptions',
+                loadMethod: 'listModels',
+                default: 'grok-3-mini',
+                freeSolo: true
             },
             {
                 label: 'Temperature',
@@ -69,14 +72,6 @@ class ChatXAI_ChatModels implements INode {
                 default: false,
                 optional: true
             },
-            {
-                label: 'Max Tokens',
-                name: 'maxTokens',
-                type: 'number',
-                step: 1,
-                optional: true,
-                additionalParams: true
-            },
             {
                 label: 'Max Tokens',
                 name: 'maxTokens',
@@ -88,6 +83,12 @@ class ChatXAI_ChatModels implements INode {
         ]
     }
 
+    loadMethods = {
+        async listModels(_: INodeData, __?: ICommonObject): Promise<INodeOptionsValue[]> {
+            return await getModels(MODEL_TYPE.CHAT, 'chatXAI')
+        }
+    }
+
     async init(nodeData: INodeData, _: string, options: ICommonObject): Promise<any> {
         const cache = nodeData.inputs?.cache as BaseCache
         const temperature = nodeData.inputs?.temperature as string