Feature/Custom Assistant Builder (#3631)

* add custom assistant builder

* add tools to custom assistant

* add save assistant button

packages/components/nodes/chatmodels/AWSBedrock/AWSChatBedrock.ts

@@ -55,7 +55,7 @@ class AWSChatBedrock_ChatModels implements INode {
                 name: 'model',
                 type: 'asyncOptions',
                 loadMethod: 'listModels',
-                default: 'anthropic.claude-3-haiku'
+                default: 'anthropic.claude-3-haiku-20240307-v1:0'
             },
             {
                 label: 'Custom Model Name',

packages/server/src/Interface.ts

@@ -2,7 +2,9 @@ import { IAction, ICommonObject, IFileUpload, INode, INodeData as INodeDataFromC
 
 export type MessageType = 'apiMessage' | 'userMessage'
 
-export type ChatflowType = 'CHATFLOW' | 'MULTIAGENT'
+export type ChatflowType = 'CHATFLOW' | 'MULTIAGENT' | 'ASSISTANT'
+
+export type AssistantType = 'CUSTOM' | 'OPENAI' | 'AZURE'
 
 export enum ChatType {
     INTERNAL = 'INTERNAL',

packages/server/src/controllers/assistants/index.ts

@@ -2,6 +2,7 @@ import { Request, Response, NextFunction } from 'express'
 import assistantsService from '../../services/assistants'
 import { InternalFlowiseError } from '../../errors/internalFlowiseError'
 import { StatusCodes } from 'http-status-codes'
+import { AssistantType } from '../../Interface'
 
 const createAssistant = async (req: Request, res: Response, next: NextFunction) => {
     try {
@@ -35,7 +36,8 @@ const deleteAssistant = async (req: Request, res: Response, next: NextFunction)
 
 const getAllAssistants = async (req: Request, res: Response, next: NextFunction) => {
     try {
-        const apiResponse = await assistantsService.getAllAssistants()
+        const type = req.query.type as AssistantType
+        const apiResponse = await assistantsService.getAllAssistants(type)
         return res.json(apiResponse)
     } catch (error) {
         next(error)
@@ -78,10 +80,56 @@ const updateAssistant = async (req: Request, res: Response, next: NextFunction)
     }
 }
 
+const getChatModels = async (req: Request, res: Response, next: NextFunction) => {
+    try {
+        const apiResponse = await assistantsService.getChatModels()
+        return res.json(apiResponse)
+    } catch (error) {
+        next(error)
+    }
+}
+
+const getDocumentStores = async (req: Request, res: Response, next: NextFunction) => {
+    try {
+        const apiResponse = await assistantsService.getDocumentStores()
+        return res.json(apiResponse)
+    } catch (error) {
+        next(error)
+    }
+}
+
+const getTools = async (req: Request, res: Response, next: NextFunction) => {
+    try {
+        const apiResponse = await assistantsService.getTools()
+        return res.json(apiResponse)
+    } catch (error) {
+        next(error)
+    }
+}
+
+const generateAssistantInstruction = async (req: Request, res: Response, next: NextFunction) => {
+    try {
+        if (!req.body) {
+            throw new InternalFlowiseError(
+                StatusCodes.PRECONDITION_FAILED,
+                `Error: assistantsController.generateAssistantInstruction - body not provided!`
+            )
+        }
+        const apiResponse = await assistantsService.generateAssistantInstruction(req.body.task, req.body.selectedChatModel)
+        return res.json(apiResponse)
+    } catch (error) {
+        next(error)
+    }
+}
+
 export default {
     createAssistant,
     deleteAssistant,
     getAllAssistants,
     getAssistantById,
-    updateAssistant
+    updateAssistant,
+    getChatModels,
+    getDocumentStores,
+    getTools,
+    generateAssistantInstruction
 }

packages/server/src/controllers/documentstore/index.ts

@@ -410,6 +410,24 @@ const refreshDocStoreMiddleware = async (req: Request, res: Response, next: Next
     }
 }
 
+const generateDocStoreToolDesc = async (req: Request, res: Response, next: NextFunction) => {
+    try {
+        if (typeof req.params.id === 'undefined' || req.params.id === '') {
+            throw new InternalFlowiseError(
+                StatusCodes.PRECONDITION_FAILED,
+                `Error: documentStoreController.generateDocStoreToolDesc - storeId not provided!`
+            )
+        }
+        if (typeof req.body === 'undefined') {
+            throw new Error('Error: documentStoreController.generateDocStoreToolDesc - body not provided!')
+        }
+        const apiResponse = await documentStoreService.generateDocStoreToolDesc(req.params.id, req.body.selectedChatModel)
+        return res.json(apiResponse)
+    } catch (error) {
+        next(error)
+    }
+}
+
 export default {
     deleteDocumentStore,
     createDocumentStore,
@@ -434,5 +452,6 @@ export default {
     getRateLimiterMiddleware,
     upsertDocStoreMiddleware,
     refreshDocStoreMiddleware,
-    saveProcessingLoader
+    saveProcessingLoader,
+    generateDocStoreToolDesc
 }

packages/server/src/database/entities/Assistant.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import { Entity, Column, CreateDateColumn, UpdateDateColumn, PrimaryGeneratedColumn } from 'typeorm'
-import { IAssistant } from '../../Interface'
+import { AssistantType, IAssistant } from '../../Interface'
 
 @Entity()
 export class Assistant implements IAssistant {
@@ -16,6 +16,9 @@ export class Assistant implements IAssistant {
     @Column({ nullable: true })
     iconSrc?: string
 
+    @Column({ nullable: true, type: 'text' })
+    type?: AssistantType
+
     @Column({ type: 'timestamp' })
     @CreateDateColumn()
     createdDate: Date

packages/server/src/database/migrations/mariadb/1733011290987-AddTypeToAssistant.ts

@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class AddTypeToAssistant1733011290987 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        const columnExists = await queryRunner.hasColumn('assistant', 'type')
+        if (!columnExists) {
+            await queryRunner.query(`ALTER TABLE \`assistant\` ADD COLUMN \`type\` TEXT;`)
+            await queryRunner.query(`UPDATE \`assistant\` SET \`type\` = 'OPENAI';`)
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE \`assistant\` DROP COLUMN \`type\`;`)
+    }
+}

packages/server/src/database/migrations/mariadb/index.ts

@@ -27,6 +27,7 @@ import { LongTextColumn1722301395521 } from './1722301395521-LongTextColumn'
 import { AddCustomTemplate1725629836652 } from './1725629836652-AddCustomTemplate'
 import { AddArtifactsToChatMessage1726156258465 } from './1726156258465-AddArtifactsToChatMessage'
 import { AddFollowUpPrompts1726666318346 } from './1726666318346-AddFollowUpPrompts'
+import { AddTypeToAssistant1733011290987 } from './1733011290987-AddTypeToAssistant'
 
 export const mariadbMigrations = [
     Init1693840429259,
@@ -57,5 +58,6 @@ export const mariadbMigrations = [
     LongTextColumn1722301395521,
     AddCustomTemplate1725629836652,
     AddArtifactsToChatMessage1726156258465,
-    AddFollowUpPrompts1726666318346
+    AddFollowUpPrompts1726666318346,
+    AddTypeToAssistant1733011290987
 ]

packages/server/src/database/migrations/mysql/1733011290987-AddTypeToAssistant.ts

@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class AddTypeToAssistant1733011290987 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        const columnExists = await queryRunner.hasColumn('assistant', 'type')
+        if (!columnExists) {
+            await queryRunner.query(`ALTER TABLE \`assistant\` ADD COLUMN \`type\` TEXT;`)
+            await queryRunner.query(`UPDATE \`assistant\` SET \`type\` = 'OPENAI';`)
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE \`assistant\` DROP COLUMN \`type\`;`)
+    }
+}

packages/server/src/database/migrations/mysql/index.ts

@@ -27,6 +27,7 @@ import { LongTextColumn1722301395521 } from './1722301395521-LongTextColumn'
 import { AddCustomTemplate1725629836652 } from './1725629836652-AddCustomTemplate'
 import { AddArtifactsToChatMessage1726156258465 } from './1726156258465-AddArtifactsToChatMessage'
 import { AddFollowUpPrompts1726666302024 } from './1726666302024-AddFollowUpPrompts'
+import { AddTypeToAssistant1733011290987 } from './1733011290987-AddTypeToAssistant'
 
 export const mysqlMigrations = [
     Init1693840429259,
@@ -57,5 +58,6 @@ export const mysqlMigrations = [
     LongTextColumn1722301395521,
     AddCustomTemplate1725629836652,
     AddArtifactsToChatMessage1726156258465,
-    AddFollowUpPrompts1726666302024
+    AddFollowUpPrompts1726666302024,
+    AddTypeToAssistant1733011290987
 ]

packages/server/src/database/migrations/postgres/1733011290987-AddTypeToAssistant.ts

@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class AddTypeToAssistant1733011290987 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        const columnExists = await queryRunner.hasColumn('assistant', 'type')
+        if (!columnExists) {
+            await queryRunner.query(`ALTER TABLE "assistant" ADD COLUMN "type" TEXT;`)
+            await queryRunner.query(`UPDATE "assistant" SET "type" = 'OPENAI';`)
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "assistant" DROP COLUMN "type";`)
+    }
+}

packages/server/src/database/migrations/postgres/index.ts

@@ -27,6 +27,7 @@ import { AddActionToChatMessage1721078251523 } from './1721078251523-AddActionTo
 import { AddCustomTemplate1725629836652 } from './1725629836652-AddCustomTemplate'
 import { AddArtifactsToChatMessage1726156258465 } from './1726156258465-AddArtifactsToChatMessage'
 import { AddFollowUpPrompts1726666309552 } from './1726666309552-AddFollowUpPrompts'
+import { AddTypeToAssistant1733011290987 } from './1733011290987-AddTypeToAssistant'
 
 export const postgresMigrations = [
     Init1693891895163,
@@ -57,5 +58,6 @@ export const postgresMigrations = [
     AddActionToChatMessage1721078251523,
     AddCustomTemplate1725629836652,
     AddArtifactsToChatMessage1726156258465,
-    AddFollowUpPrompts1726666309552
+    AddFollowUpPrompts1726666309552,
+    AddTypeToAssistant1733011290987
 ]

packages/server/src/database/migrations/sqlite/1733011290987-AddTypeToAssistant.ts

@@ -0,0 +1,15 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class AddTypeToAssistant1733011290987 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        const columnExists = await queryRunner.hasColumn('assistant', 'type')
+        if (!columnExists) {
+            await queryRunner.query(`ALTER TABLE "assistant" ADD COLUMN "type" TEXT;`)
+            await queryRunner.query(`UPDATE "assistant" SET "type" = 'OPENAI';`)
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "assistant" DROP COLUMN "type";`)
+    }
+}

packages/server/src/database/migrations/sqlite/index.ts

@@ -26,6 +26,7 @@ import { AddActionToChatMessage1721078251523 } from './1721078251523-AddActionTo
 import { AddArtifactsToChatMessage1726156258465 } from './1726156258465-AddArtifactsToChatMessage'
 import { AddCustomTemplate1725629836652 } from './1725629836652-AddCustomTemplate'
 import { AddFollowUpPrompts1726666294213 } from './1726666294213-AddFollowUpPrompts'
+import { AddTypeToAssistant1733011290987 } from './1733011290987-AddTypeToAssistant'
 
 export const sqliteMigrations = [
     Init1693835579790,
@@ -55,5 +56,6 @@ export const sqliteMigrations = [
     AddActionToChatMessage1721078251523,
     AddArtifactsToChatMessage1726156258465,
     AddCustomTemplate1725629836652,
-    AddFollowUpPrompts1726666294213
+    AddFollowUpPrompts1726666294213,
+    AddTypeToAssistant1733011290987
 ]

packages/server/src/routes/assistants/index.ts

@@ -16,4 +16,11 @@ router.put(['/', '/:id'], assistantsController.updateAssistant)
 // DELETE
 router.delete(['/', '/:id'], assistantsController.deleteAssistant)
 
+router.get('/components/chatmodels', assistantsController.getChatModels)
+router.get('/components/docstores', assistantsController.getDocumentStores)
+router.get('/components/tools', assistantsController.getTools)
+
+// Generate Assistant Instruction
+router.post('/generate/instruction', assistantsController.generateAssistantInstruction)
+
 export default router

packages/server/src/routes/documentstore/index.ts

@@ -61,4 +61,7 @@ router.get('/components/recordmanager', documentStoreController.getRecordManager
 // update the selected vector store from the playground
 router.post('/vectorstore/update', documentStoreController.updateVectorStoreConfigOnly)
 
+// generate docstore tool description
+router.post('/generate-tool-desc/:id', documentStoreController.generateDocStoreToolDesc)
+
 export default router

packages/server/src/services/assistants/index.ts

@@ -4,11 +4,17 @@ import { uniqWith, isEqual, cloneDeep } from 'lodash'
 import { getRunningExpressApp } from '../../utils/getRunningExpressApp'
 import { Assistant } from '../../database/entities/Assistant'
 import { Credential } from '../../database/entities/Credential'
-import { decryptCredentialData, getAppVersion } from '../../utils'
+import { databaseEntities, decryptCredentialData, getAppVersion } from '../../utils'
 import { InternalFlowiseError } from '../../errors/internalFlowiseError'
 import { getErrorMessage } from '../../errors/utils'
 import { DeleteResult, QueryRunner } from 'typeorm'
 import { FLOWISE_METRIC_COUNTERS, FLOWISE_COUNTER_STATUS } from '../../Interface.Metrics'
+import { AssistantType } from '../../Interface'
+import nodesService from '../nodes'
+import { DocumentStore } from '../../database/entities/DocumentStore'
+import { ICommonObject } from 'flowise-components'
+import logger from '../../utils/logger'
+import { ASSISTANT_PROMPT_GENERATOR } from '../../utils/prompt'
 
 const createAssistant = async (requestBody: any): Promise<Assistant> => {
     try {
@@ -17,6 +23,24 @@ const createAssistant = async (requestBody: any): Promise<Assistant> => {
             throw new InternalFlowiseError(StatusCodes.INTERNAL_SERVER_ERROR, `Invalid request body`)
         }
         const assistantDetails = JSON.parse(requestBody.details)
+
+        if (requestBody.type === 'CUSTOM') {
+            const newAssistant = new Assistant()
+            Object.assign(newAssistant, requestBody)
+
+            const assistant = appServer.AppDataSource.getRepository(Assistant).create(newAssistant)
+            const dbResponse = await appServer.AppDataSource.getRepository(Assistant).save(assistant)
+
+            await appServer.telemetry.sendTelemetry('assistant_created', {
+                version: await getAppVersion(),
+                assistantId: dbResponse.id
+            })
+            appServer.metricsProvider?.incrementCounter(FLOWISE_METRIC_COUNTERS.ASSISTANT_CREATED, {
+                status: FLOWISE_COUNTER_STATUS.SUCCESS
+            })
+            return dbResponse
+        }
+
         try {
             const credential = await appServer.AppDataSource.getRepository(Credential).findOneBy({
                 id: requestBody.credential
@@ -131,6 +155,10 @@ const deleteAssistant = async (assistantId: string, isDeleteBoth: any): Promise<
         if (!assistant) {
             throw new InternalFlowiseError(StatusCodes.NOT_FOUND, `Assistant ${assistantId} not found`)
         }
+        if (assistant.type === 'CUSTOM') {
+            const dbResponse = await appServer.AppDataSource.getRepository(Assistant).delete({ id: assistantId })
+            return dbResponse
+        }
         try {
             const assistantDetails = JSON.parse(assistant.details)
             const credential = await appServer.AppDataSource.getRepository(Credential).findOneBy({
@@ -163,9 +191,15 @@ const deleteAssistant = async (assistantId: string, isDeleteBoth: any): Promise<
     }
 }
 
-const getAllAssistants = async (): Promise<Assistant[]> => {
+const getAllAssistants = async (type?: AssistantType): Promise<Assistant[]> => {
     try {
         const appServer = getRunningExpressApp()
+        if (type) {
+            const dbResponse = await appServer.AppDataSource.getRepository(Assistant).findBy({
+                type
+            })
+            return dbResponse
+        }
         const dbResponse = await appServer.AppDataSource.getRepository(Assistant).find()
         return dbResponse
     } catch (error) {
@@ -204,6 +238,17 @@ const updateAssistant = async (assistantId: string, requestBody: any): Promise<A
         if (!assistant) {
             throw new InternalFlowiseError(StatusCodes.NOT_FOUND, `Assistant ${assistantId} not found`)
         }
+
+        if (assistant.type === 'CUSTOM') {
+            const body = requestBody
+            const updateAssistant = new Assistant()
+            Object.assign(updateAssistant, body)
+
+            appServer.AppDataSource.getRepository(Assistant).merge(assistant, updateAssistant)
+            const dbResponse = await appServer.AppDataSource.getRepository(Assistant).save(assistant)
+            return dbResponse
+        }
+
         try {
             const openAIAssistantId = JSON.parse(assistant.details)?.id
             const body = requestBody
@@ -336,7 +381,115 @@ const importAssistants = async (newAssistants: Partial<Assistant>[], queryRunner
     } catch (error) {
         throw new InternalFlowiseError(
             StatusCodes.INTERNAL_SERVER_ERROR,
-            `Error: variableService.importVariables - ${getErrorMessage(error)}`
+            `Error: assistantsService.importAssistants - ${getErrorMessage(error)}`
+        )
+    }
+}
+
+const getChatModels = async (): Promise<any> => {
+    try {
+        const dbResponse = await nodesService.getAllNodesForCategory('Chat Models')
+        return dbResponse.filter((node) => !node.tags?.includes('LlamaIndex'))
+    } catch (error) {
+        throw new InternalFlowiseError(
+            StatusCodes.INTERNAL_SERVER_ERROR,
+            `Error: assistantsService.getChatModels - ${getErrorMessage(error)}`
+        )
+    }
+}
+
+const getDocumentStores = async (): Promise<any> => {
+    try {
+        const appServer = getRunningExpressApp()
+        const stores = await appServer.AppDataSource.getRepository(DocumentStore).find()
+        const returnData = []
+        for (const store of stores) {
+            if (store.status === 'UPSERTED') {
+                const obj = {
+                    name: store.id,
+                    label: store.name,
+                    description: store.description
+                }
+                returnData.push(obj)
+            }
+        }
+        return returnData
+    } catch (error) {
+        throw new InternalFlowiseError(
+            StatusCodes.INTERNAL_SERVER_ERROR,
+            `Error: assistantsService.getDocumentStores - ${getErrorMessage(error)}`
+        )
+    }
+}
+
+const getTools = async (): Promise<any> => {
+    try {
+        const tools = await nodesService.getAllNodesForCategory('Tools')
+        const whitelistTypes = [
+            'asyncOptions',
+            'options',
+            'multiOptions',
+            'datagrid',
+            'string',
+            'number',
+            'boolean',
+            'password',
+            'json',
+            'code',
+            'date',
+            'file',
+            'folder',
+            'tabs'
+        ]
+        // filter out those tools that input params type are not in the list
+        const filteredTools = tools.filter((tool) => {
+            const inputs = tool.inputs || []
+            return inputs.every((input) => whitelistTypes.includes(input.type))
+        })
+        return filteredTools
+    } catch (error) {
+        throw new InternalFlowiseError(StatusCodes.INTERNAL_SERVER_ERROR, `Error: assistantsService.getTools - ${getErrorMessage(error)}`)
+    }
+}
+
+const generateAssistantInstruction = async (task: string, selectedChatModel: ICommonObject): Promise<ICommonObject> => {
+    try {
+        const appServer = getRunningExpressApp()
+
+        if (selectedChatModel && Object.keys(selectedChatModel).length > 0) {
+            const nodeInstanceFilePath = appServer.nodesPool.componentNodes[selectedChatModel.name].filePath as string
+            const nodeModule = await import(nodeInstanceFilePath)
+            const newNodeInstance = new nodeModule.nodeClass()
+            const nodeData = {
+                credential: selectedChatModel.credential || selectedChatModel.inputs['FLOWISE_CREDENTIAL_ID'] || undefined,
+                inputs: selectedChatModel.inputs,
+                id: `${selectedChatModel.name}_0`
+            }
+            const options: ICommonObject = {
+                appDataSource: appServer.AppDataSource,
+                databaseEntities,
+                logger
+            }
+            const llmNodeInstance = await newNodeInstance.init(nodeData, '', options)
+            const response = await llmNodeInstance.invoke([
+                {
+                    role: 'user',
+                    content: ASSISTANT_PROMPT_GENERATOR.replace('{{task}}', task)
+                }
+            ])
+            const content = response?.content || response.kwargs?.content
+
+            return { content }
+        }
+
+        throw new InternalFlowiseError(
+            StatusCodes.INTERNAL_SERVER_ERROR,
+            `Error: assistantsService.generateAssistantInstruction - Error generating tool description`
+        )
+    } catch (error) {
+        throw new InternalFlowiseError(
+            StatusCodes.INTERNAL_SERVER_ERROR,
+            `Error: assistantsService.generateAssistantInstruction - ${getErrorMessage(error)}`
         )
     }
 }
@@ -347,5 +500,9 @@ export default {
     getAllAssistants,
     getAssistantById,
     updateAssistant,
-    importAssistants
+    importAssistants,
+    getChatModels,
+    getDocumentStores,
+    getTools,
+    generateAssistantInstruction
 }

packages/server/src/services/documentstore/index.ts

@@ -40,6 +40,7 @@ import { App } from '../../index'
 import { UpsertHistory } from '../../database/entities/UpsertHistory'
 import { cloneDeep, omit } from 'lodash'
 import { FLOWISE_COUNTER_STATUS, FLOWISE_METRIC_COUNTERS } from '../../Interface.Metrics'
+import { DOCUMENTSTORE_TOOL_DESCRIPTION_PROMPT_GENERATOR } from '../../utils/prompt'
 
 const DOCUMENT_STORE_BASE_FOLDER = 'docustore'
 
@@ -1568,6 +1569,63 @@ const refreshDocStoreMiddleware = async (storeId: string, data?: IDocumentStoreR
     }
 }
 
+const generateDocStoreToolDesc = async (docStoreId: string, selectedChatModel: ICommonObject): Promise<string> => {
+    try {
+        const appServer = getRunningExpressApp()
+
+        // get matching DocumentStoreFileChunk storeId with docStoreId, and only the first 4 chunks sorted by chunkNo
+        const chunks = await appServer.AppDataSource.getRepository(DocumentStoreFileChunk).findBy({
+            storeId: docStoreId
+        })
+
+        if (!chunks?.length) {
+            throw new InternalFlowiseError(StatusCodes.NOT_FOUND, `DocumentStore ${docStoreId} chunks not found`)
+        }
+
+        // sort the chunks by chunkNo
+        chunks.sort((a, b) => a.chunkNo - b.chunkNo)
+
+        // get the first 4 chunks
+        const chunksPageContent = chunks
+            .slice(0, 4)
+            .map((chunk) => {
+                return chunk.pageContent
+            })
+            .join('\n')
+
+        if (selectedChatModel && Object.keys(selectedChatModel).length > 0) {
+            const nodeInstanceFilePath = appServer.nodesPool.componentNodes[selectedChatModel.name].filePath as string
+            const nodeModule = await import(nodeInstanceFilePath)
+            const newNodeInstance = new nodeModule.nodeClass()
+            const nodeData = {
+                credential: selectedChatModel.credential || selectedChatModel.inputs['FLOWISE_CREDENTIAL_ID'] || undefined,
+                inputs: selectedChatModel.inputs,
+                id: `${selectedChatModel.name}_0`
+            }
+            const options: ICommonObject = {
+                appDataSource: appServer.AppDataSource,
+                databaseEntities,
+                logger
+            }
+            const llmNodeInstance = await newNodeInstance.init(nodeData, '', options)
+            const response = await llmNodeInstance.invoke(
+                DOCUMENTSTORE_TOOL_DESCRIPTION_PROMPT_GENERATOR.replace('{context}', chunksPageContent)
+            )
+            return response
+        }
+
+        throw new InternalFlowiseError(
+            StatusCodes.INTERNAL_SERVER_ERROR,
+            `Error: documentStoreServices.generateDocStoreToolDesc - Error generating tool description`
+        )
+    } catch (error) {
+        throw new InternalFlowiseError(
+            StatusCodes.INTERNAL_SERVER_ERROR,
+            `Error: documentStoreServices.generateDocStoreToolDesc - ${getErrorMessage(error)}`
+        )
+    }
+}
+
 export default {
     updateDocumentStoreUsage,
     deleteDocumentStore,
@@ -1594,5 +1652,6 @@ export default {
     deleteVectorStoreFromStore,
     updateVectorStoreConfigOnly,
     upsertDocStoreMiddleware,
-    refreshDocStoreMiddleware
+    refreshDocStoreMiddleware,
+    generateDocStoreToolDesc
 }

packages/server/src/utils/prompt.ts

@@ -0,0 +1,57 @@
+export const ASSISTANT_PROMPT_GENERATOR = `Given a task description, produce a detailed system prompt to guide a language model in completing the task effectively.
+
+<task_description>
+{{task}}
+</task_description>
+
+# Guidelines
+
+- Understand the Task: Grasp the main objective, goals, requirements, constraints, and expected output.
+- Minimal Changes: If an existing prompt is provided, improve it only if it's simple. For complex prompts, enhance clarity and add missing elements without altering the original structure.
+- Reasoning Before Conclusions**: Encourage reasoning steps before any conclusions are reached. ATTENTION! If the user provides examples where the reasoning happens afterward, REVERSE the order! NEVER START EXAMPLES WITH CONCLUSIONS!
+    - Reasoning Order: Call out reasoning portions of the prompt and conclusion parts (specific fields by name). For each, determine the ORDER in which this is done, and whether it needs to be reversed.
+    - Conclusion, classifications, or results should ALWAYS appear last.
+- Examples: Include high-quality examples if helpful, using placeholders [in brackets] for complex elements.
+   - What kinds of examples may need to be included, how many, and whether they are complex enough to benefit from placeholders.
+- Clarity and Conciseness: Use clear, specific language. Avoid unnecessary instructions or bland statements.
+- Formatting: Use markdown features for readability. DO NOT USE \`\`\` CODE BLOCKS UNLESS SPECIFICALLY REQUESTED.
+- Preserve User Content: If the input task or prompt includes extensive guidelines or examples, preserve them entirely, or as closely as possible. If they are vague, consider breaking down into sub-steps. Keep any details, guidelines, examples, variables, or placeholders provided by the user.
+- Constants: DO include constants in the prompt, as they are not susceptible to prompt injection. Such as guides, rubrics, and examples.
+- Output Format: Explicitly the most appropriate output format, in detail. This should include length and syntax (e.g. short sentence, paragraph, JSON, etc.)
+    - For tasks outputting well-defined or structured data (classification, JSON, etc.) bias toward outputting a JSON.
+    - JSON should never be wrapped in code blocks (\`\`\`) unless explicitly requested.
+
+The final prompt you output should adhere to the following structure below. Do not include any additional commentary, only output the completed system prompt. SPECIFICALLY, do not include any additional messages at the start or end of the prompt. (e.g. no "---")
+
+[Concise instruction describing the task - this should be the first line in the prompt, no section header]
+
+[Additional details as needed.]
+
+[Optional sections with headings or bullet points for detailed steps.]
+
+# Steps [optional]
+
+[optional: a detailed breakdown of the steps necessary to accomplish the task]
+
+# Output Format
+
+[Specifically call out how the output should be formatted, be it response length, structure e.g. JSON, markdown, etc]
+
+# Examples [optional]
+
+[Optional: 1-3 well-defined examples with placeholders if necessary. Clearly mark where examples start and end, and what the input and output are. User placeholders as necessary.]
+[If the examples are shorter than what a realistic example is expected to be, make a reference with () explaining how real examples should be longer / shorter / different. AND USE PLACEHOLDERS! ]
+
+# Notes [optional]
+
+[optional: edge cases, details, and an area to call or repeat out specific important considerations]`
+
+export const DOCUMENTSTORE_TOOL_DESCRIPTION_PROMPT_GENERATOR = `Here's the document context for which I would like you to create a short sentence of, under what condition this information is useful. Sentence must not more than 1024 characters.
+
+<context>
+{context}
+</context>
+
+Based on context, please create a short sentence that another AI could use as tool description. The short sentence should:
+- Use the same language as context. 
+Please generate the short sentence and output only the short sentence.`

packages/ui/src/api/assistants.js

@@ -8,7 +8,7 @@ const getAllAvailableAssistants = (credentialId) => client.get(`/openai-assistan
 // Assistant
 const createNewAssistant = (body) => client.post(`/assistants`, body)
 
-const getAllAssistants = () => client.get('/assistants')
+const getAllAssistants = (type) => client.get('/assistants?type=' + type)
 
 const getSpecificAssistant = (id) => client.get(`/assistants/${id}`)
 
@@ -44,6 +44,12 @@ const uploadFilesToAssistant = (credentialId, formData) =>
         headers: { 'Content-Type': 'multipart/form-data' }
     })
 
+const getChatModels = () => client.get('/assistants/components/chatmodels')
+const getDocStores = () => client.get('/assistants/components/docstores')
+const getTools = () => client.get('/assistants/components/tools')
+
+const generateAssistantInstruction = (body) => client.post(`/assistants/generate/instruction`, body)
+
 export default {
     getAllAssistants,
     getSpecificAssistant,
@@ -59,5 +65,9 @@ export default {
     uploadFilesToAssistant,
     uploadFilesToAssistantVectorStore,
     deleteFilesFromAssistantVectorStore,
-    deleteAssistantVectorStore
+    deleteAssistantVectorStore,
+    getChatModels,
+    getDocStores,
+    getTools,
+    generateAssistantInstruction
 }

packages/ui/src/api/documentstore.js

@@ -27,6 +27,8 @@ const getVectorStoreProviders = () => client.get('/document-store/components/vec
 const getEmbeddingProviders = () => client.get('/document-store/components/embeddings')
 const getRecordManagerProviders = () => client.get('/document-store/components/recordmanager')
 
+const generateDocStoreToolDesc = (storeId, body) => client.post('/document-store/generate-tool-desc/' + storeId, body)
+
 export default {
     getAllDocumentStores,
     getSpecificDocumentStore,
@@ -49,5 +51,6 @@ export default {
     deleteVectorStoreDataFromStore,
     updateVectorStoreConfig,
     saveProcessingLoader,
-    refreshLoader
+    refreshLoader,
+    generateDocStoreToolDesc
 }

packages/ui/src/layout/MainLayout/Sidebar/index.jsx

@@ -77,7 +77,8 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
                             top: `${headerHeight}px`
                         },
                         borderRight: drawerOpen ? '1px solid' : 'none',
-                        borderColor: drawerOpen ? theme.palette.primary[200] + 75 : 'transparent'
+                        borderColor: drawerOpen ? theme.palette.primary[200] + 75 : 'transparent',
+                        zIndex: 1000
                     }
                 }}
                 ModalProps={{ keepMounted: true }}

packages/ui/src/menu-items/customassistant.js

@@ -0,0 +1,50 @@
+// assets
+import { IconTrash, IconMessage, IconAdjustmentsHorizontal, IconUsers } from '@tabler/icons-react'
+
+// constant
+const icons = {
+    IconTrash,
+    IconMessage,
+    IconAdjustmentsHorizontal,
+    IconUsers
+}
+
+// ==============================|| SETTINGS MENU ITEMS ||============================== //
+
+const customAssistantSettings = {
+    id: 'settings',
+    title: '',
+    type: 'group',
+    children: [
+        {
+            id: 'viewMessages',
+            title: 'View Messages',
+            type: 'item',
+            url: '',
+            icon: icons.IconMessage
+        },
+        {
+            id: 'viewLeads',
+            title: 'View Leads',
+            type: 'item',
+            url: '',
+            icon: icons.IconUsers
+        },
+        {
+            id: 'chatflowConfiguration',
+            title: 'Configuration',
+            type: 'item',
+            url: '',
+            icon: icons.IconAdjustmentsHorizontal
+        },
+        {
+            id: 'deleteAssistant',
+            title: 'Delete Assistant',
+            type: 'item',
+            url: '',
+            icon: icons.IconTrash
+        }
+    ]
+}
+
+export default customAssistantSettings

packages/ui/src/menu-items/dashboard.js

@@ -38,6 +38,14 @@ const dashboard = {
             breadcrumbs: true,
             isBeta: true
         },
+        {
+            id: 'assistants',
+            title: 'Assistants',
+            type: 'item',
+            url: '/assistants',
+            icon: icons.IconRobot,
+            breadcrumbs: true
+        },
         {
             id: 'marketplaces',
             title: 'Marketplaces',
@@ -54,14 +62,6 @@ const dashboard = {
             icon: icons.IconTool,
             breadcrumbs: true
         },
-        {
-            id: 'assistants',
-            title: 'Assistants',
-            type: 'item',
-            url: '/assistants',
-            icon: icons.IconRobot,
-            breadcrumbs: true
-        },
         {
             id: 'credentials',
             title: 'Credentials',

packages/ui/src/routes/MainRoutes.jsx

@@ -21,6 +21,9 @@ const Tools = Loadable(lazy(() => import('@/views/tools')))
 
 // assistants routing
 const Assistants = Loadable(lazy(() => import('@/views/assistants')))
+const OpenAIAssistantLayout = Loadable(lazy(() => import('@/views/assistants/openai/OpenAIAssistantLayout')))
+const CustomAssistantLayout = Loadable(lazy(() => import('@/views/assistants/custom/CustomAssistantLayout')))
+const CustomAssistantConfigurePreview = Loadable(lazy(() => import('@/views/assistants/custom/CustomAssistantConfigurePreview')))
 
 // credentials routing
 const Credentials = Loadable(lazy(() => import('@/views/credentials')))
@@ -70,6 +73,18 @@ const MainRoutes = {
             path: '/assistants',
             element: <Assistants />
         },
+        {
+            path: '/assistants/custom',
+            element: <CustomAssistantLayout />
+        },
+        {
+            path: '/assistants/custom/:id',
+            element: <CustomAssistantConfigurePreview />
+        },
+        {
+            path: '/assistants/openai',
+            element: <OpenAIAssistantLayout />
+        },
         {
             path: '/credentials',
             element: <Credentials />

packages/ui/src/ui-component/button/FlowListMenu.jsx

@@ -272,7 +272,9 @@ export default function FlowListMenu({ chatflow, isAgentCanvas, setError, update
         try {
             const flowData = JSON.parse(chatflow.flowData)
             let dataStr = JSON.stringify(generateExportFlowData(flowData), null, 2)
-            let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+            //let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+            const blob = new Blob([dataStr], { type: 'application/json' })
+            const dataUri = URL.createObjectURL(blob)
 
             let exportFileDefaultName = `${chatflow.name} ${title}.json`
 

packages/ui/src/ui-component/dialog/PromptGeneratorDialog.jsx

@@ -0,0 +1,205 @@
+import { createPortal } from 'react-dom'
+import { useState, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import PropTypes from 'prop-types'
+import { OutlinedInput, DialogActions, Button, Dialog, DialogContent, DialogTitle } from '@mui/material'
+import { StyledButton } from '@/ui-component/button/StyledButton'
+import assistantsApi from '@/api/assistants'
+import { closeSnackbar as closeSnackbarAction, enqueueSnackbar as enqueueSnackbarAction } from '@/store/actions'
+import { IconX, IconWand, IconArrowLeft, IconNotebook, IconLanguage, IconMail, IconCode, IconReport, IconWorld } from '@tabler/icons-react'
+import useNotifier from '@/utils/useNotifier'
+import { LoadingButton } from '@mui/lab'
+
+const defaultInstructions = [
+    {
+        text: 'Summarize a document',
+        img: <IconNotebook />
+    },
+    {
+        text: 'Translate the language',
+        img: <IconLanguage />
+    },
+    {
+        text: 'Write me an email',
+        img: <IconMail />
+    },
+    {
+        text: 'Convert the code to another language',
+        img: <IconCode />
+    },
+    {
+        text: 'Research and generate a report',
+        img: <IconReport />
+    },
+    {
+        text: 'Plan a trip',
+        img: <IconWorld />
+    }
+]
+
+const AssistantPromptGenerator = ({ show, dialogProps, onCancel, onConfirm }) => {
+    const portalElement = document.getElementById('portal')
+    const [customAssistantInstruction, setCustomAssistantInstruction] = useState('')
+    const [generatedInstruction, setGeneratedInstruction] = useState('')
+    const [loading, setLoading] = useState(false)
+
+    // ==============================|| Snackbar ||============================== //
+    const dispatch = useDispatch()
+    useNotifier()
+    const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
+    const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
+
+    const onGenerate = async () => {
+        try {
+            setLoading(true)
+            const selectedChatModelObj = {
+                name: dialogProps.data.selectedChatModel.name,
+                inputs: dialogProps.data.selectedChatModel.inputs
+            }
+            const resp = await assistantsApi.generateAssistantInstruction({
+                selectedChatModel: selectedChatModelObj,
+                task: customAssistantInstruction
+            })
+
+            if (resp.data) {
+                setLoading(false)
+                if (resp.data.content) {
+                    setGeneratedInstruction(resp.data.content)
+                }
+            }
+        } catch (error) {
+            setLoading(false)
+            enqueueSnackbar({
+                message: typeof error.response.data === 'object' ? error.response.data.message : error.response.data,
+                options: {
+                    key: new Date().getTime() + Math.random(),
+                    variant: 'error',
+                    persist: true,
+                    action: (key) => (
+                        <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                            <IconX />
+                        </Button>
+                    )
+                }
+            })
+        }
+    }
+
+    // clear the state when dialog is closed
+    useEffect(() => {
+        if (!show) {
+            setCustomAssistantInstruction('')
+            setGeneratedInstruction('')
+        }
+    }, [show])
+
+    const component = show ? (
+        <>
+            <Dialog
+                fullWidth
+                maxWidth='md'
+                open={show}
+                onClose={onCancel}
+                aria-labelledby='alert-dialog-title'
+                aria-describedby='alert-dialog-description'
+            >
+                <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                    {dialogProps.title}
+                </DialogTitle>
+                <DialogContent>
+                    <span>{dialogProps.description}</span>
+                    <div
+                        style={{
+                            display: 'block',
+                            flexDirection: 'row',
+                            width: '100%',
+                            marginTop: '15px'
+                        }}
+                    >
+                        {defaultInstructions.map((instruction, index) => {
+                            return (
+                                <Button
+                                    size='small'
+                                    key={index}
+                                    sx={{ textTransform: 'none', mr: 1, mb: 1, borderRadius: '16px' }}
+                                    variant='outlined'
+                                    color='inherit'
+                                    onClick={() => {
+                                        setCustomAssistantInstruction(instruction.text)
+                                        setGeneratedInstruction('')
+                                    }}
+                                    startIcon={instruction.img}
+                                >
+                                    {instruction.text}
+                                </Button>
+                            )
+                        })}
+                    </div>
+                    {!generatedInstruction && (
+                        <OutlinedInput
+                            sx={{ mt: 2, width: '100%' }}
+                            type={'text'}
+                            multiline={true}
+                            rows={12}
+                            disabled={loading}
+                            value={customAssistantInstruction}
+                            placeholder={'Describe your task here'}
+                            onChange={(event) => setCustomAssistantInstruction(event.target.value)}
+                        />
+                    )}
+                    {generatedInstruction && (
+                        <OutlinedInput
+                            sx={{ mt: 2, width: '100%' }}
+                            type={'text'}
+                            multiline={true}
+                            rows={12}
+                            value={generatedInstruction}
+                            onChange={(event) => setGeneratedInstruction(event.target.value)}
+                        />
+                    )}
+                </DialogContent>
+                <DialogActions sx={{ pb: 3, pr: 3 }}>
+                    {!generatedInstruction && (
+                        <LoadingButton
+                            loading={loading}
+                            variant='contained'
+                            onClick={() => {
+                                onGenerate()
+                            }}
+                            startIcon={<IconWand size={20} />}
+                        >
+                            Generate
+                        </LoadingButton>
+                    )}
+                    {generatedInstruction && (
+                        <Button
+                            variant='outlined'
+                            startIcon={<IconArrowLeft size={20} />}
+                            onClick={() => {
+                                setGeneratedInstruction('')
+                            }}
+                        >
+                            Back
+                        </Button>
+                    )}
+                    {generatedInstruction && (
+                        <StyledButton variant='contained' onClick={() => onConfirm(generatedInstruction)}>
+                            Apply
+                        </StyledButton>
+                    )}
+                </DialogActions>
+            </Dialog>
+        </>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+AssistantPromptGenerator.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func
+}
+
+export default AssistantPromptGenerator

packages/ui/src/ui-component/dialog/ViewLeadsDialog.jsx

@@ -75,7 +75,9 @@ const ViewLeadsDialog = ({ show, dialogProps, onCancel }) => {
             leads
         }
         const dataStr = JSON.stringify(exportData, null, 2)
-        const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+        //const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+        const blob = new Blob([dataStr], { type: 'application/json' })
+        const dataUri = URL.createObjectURL(blob)
 
         const exportFileDefaultName = `${dialogProps.chatflow.id}-leads.json`
 

packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx

@@ -372,7 +372,9 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
         }
 
         const dataStr = JSON.stringify(exportMessages, null, 2)
-        const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+        //const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+        const blob = new Blob([dataStr], { type: 'application/json' })
+        const dataUri = URL.createObjectURL(blob)
 
         const exportFileDefaultName = `${dialogProps.chatflow.id}-Message.json`
 

packages/ui/src/ui-component/dropdown/Dropdown.jsx

@@ -40,11 +40,48 @@ export const Dropdown = ({ name, value, loading, options, onSelect, disabled = f
                     onSelect(value)
                 }}
                 PopperComponent={StyledPopper}
-                renderInput={(params) => (
-                    <TextField {...params} value={internalValue} sx={{ height: '100%', '& .MuiInputBase-root': { height: '100%' } }} />
-                )}
+                renderInput={(params) => {
+                    const matchingOption = findMatchingOptions(options, internalValue)
+                    return (
+                        <TextField
+                            {...params}
+                            value={internalValue}
+                            sx={{
+                                height: '100%',
+                                '& .MuiInputBase-root': { height: '100%' }
+                            }}
+                            InputProps={{
+                                ...params.InputProps,
+                                startAdornment: matchingOption?.imageSrc ? (
+                                    <Box
+                                        component='img'
+                                        src={matchingOption.imageSrc}
+                                        alt={matchingOption.label || 'Selected Option'}
+                                        sx={{
+                                            width: 32,
+                                            height: 32,
+                                            borderRadius: '50%'
+                                        }}
+                                    />
+                                ) : null
+                            }}
+                        />
+                    )
+                }}
                 renderOption={(props, option) => (
-                    <Box component='li' {...props}>
+                    <Box component='li' {...props} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        {option.imageSrc && (
+                            <img
+                                src={option.imageSrc}
+                                alt={option.description}
+                                style={{
+                                    width: 30,
+                                    height: 30,
+                                    padding: 1,
+                                    borderRadius: '50%'
+                                }}
+                            />
+                        )}
                         <div style={{ display: 'flex', flexDirection: 'column' }}>
                             <Typography variant='h5'>{option.label}</Typography>
                             {option.description && (

packages/ui/src/views/agentflows/index.jsx

@@ -58,7 +58,8 @@ const Agentflows = () => {
     function filterFlows(data) {
         return (
             data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
-            (data.category && data.category.toLowerCase().indexOf(search.toLowerCase()) > -1)
+            (data.category && data.category.toLowerCase().indexOf(search.toLowerCase()) > -1) ||
+            data.id.toLowerCase().indexOf(search.toLowerCase()) > -1
         )
     }
 

packages/ui/src/views/assistants/custom/AddCustomAssistantDialog.jsx

@@ -0,0 +1,148 @@
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import { useState, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import {
+    HIDE_CANVAS_DIALOG,
+    SHOW_CANVAS_DIALOG,
+    enqueueSnackbar as enqueueSnackbarAction,
+    closeSnackbar as closeSnackbarAction
+} from '@/store/actions'
+import { v4 as uuidv4 } from 'uuid'
+
+// Material
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Box, Typography, OutlinedInput } from '@mui/material'
+
+// Project imports
+import { StyledButton } from '@/ui-component/button/StyledButton'
+import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
+
+// Icons
+import { IconX, IconFiles } from '@tabler/icons-react'
+
+// API
+import assistantsApi from '@/api/assistants'
+
+// utils
+import useNotifier from '@/utils/useNotifier'
+
+const AddCustomAssistantDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
+    const portalElement = document.getElementById('portal')
+
+    const dispatch = useDispatch()
+
+    // ==============================|| Snackbar ||============================== //
+
+    useNotifier()
+
+    const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
+    const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
+
+    const [customAssistantName, setCustomAssistantName] = useState('')
+
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+        return () => dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
+
+    const createCustomAssistant = async () => {
+        try {
+            const obj = {
+                details: JSON.stringify({
+                    name: customAssistantName
+                }),
+                credential: uuidv4(),
+                type: 'CUSTOM'
+            }
+            const createResp = await assistantsApi.createNewAssistant(obj)
+            if (createResp.data) {
+                enqueueSnackbar({
+                    message: 'New Custom Assistant created.',
+                    options: {
+                        key: new Date().getTime() + Math.random(),
+                        variant: 'success',
+                        action: (key) => (
+                            <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                                <IconX />
+                            </Button>
+                        )
+                    }
+                })
+                onConfirm(createResp.data.id)
+            }
+        } catch (err) {
+            const errorData = typeof err === 'string' ? err : err.response?.data || `${err.response.data.message}`
+            enqueueSnackbar({
+                message: `Failed to add new Custom Assistant: ${errorData}`,
+                options: {
+                    key: new Date().getTime() + Math.random(),
+                    variant: 'error',
+                    persist: true,
+                    action: (key) => (
+                        <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                            <IconX />
+                        </Button>
+                    )
+                }
+            })
+            onCancel()
+        }
+    }
+
+    const component = show ? (
+        <Dialog
+            fullWidth
+            maxWidth='sm'
+            open={show}
+            onClose={onCancel}
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogTitle style={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                    <IconFiles style={{ marginRight: '10px' }} />
+                    {dialogProps.title}
+                </div>
+            </DialogTitle>
+            <DialogContent>
+                <Box sx={{ p: 2 }}>
+                    <div style={{ display: 'flex', flexDirection: 'row' }}>
+                        <Typography>
+                            Name<span style={{ color: 'red' }}>&nbsp;*</span>
+                        </Typography>
+
+                        <div style={{ flexGrow: 1 }}></div>
+                    </div>
+                    <OutlinedInput
+                        size='small'
+                        sx={{ mt: 1 }}
+                        type='string'
+                        fullWidth
+                        key='customAssistantName'
+                        onChange={(e) => setCustomAssistantName(e.target.value)}
+                        value={customAssistantName ?? ''}
+                    />
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => onCancel()}>Cancel</Button>
+                <StyledButton disabled={!customAssistantName} variant='contained' onClick={() => createCustomAssistant()}>
+                    {dialogProps.confirmButtonName}
+                </StyledButton>
+            </DialogActions>
+            <ConfirmDialog />
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+AddCustomAssistantDialog.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func
+}
+
+export default AddCustomAssistantDialog

packages/ui/src/views/assistants/custom/CustomAssistantLayout.jsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+// material-ui
+import { Box, Stack, Skeleton } from '@mui/material'
+
+// project imports
+import ViewHeader from '@/layout/MainLayout/ViewHeader'
+import MainCard from '@/ui-component/cards/MainCard'
+import ItemCard from '@/ui-component/cards/ItemCard'
+import { baseURL, gridSpacing } from '@/store/constant'
+import AssistantEmptySVG from '@/assets/images/assistant_empty.svg'
+import { StyledButton } from '@/ui-component/button/StyledButton'
+import AddCustomAssistantDialog from './AddCustomAssistantDialog'
+import ErrorBoundary from '@/ErrorBoundary'
+
+// API
+import assistantsApi from '@/api/assistants'
+
+// Hooks
+import useApi from '@/hooks/useApi'
+
+// icons
+import { IconPlus } from '@tabler/icons-react'
+
+// ==============================|| CustomAssistantLayout ||============================== //
+
+const CustomAssistantLayout = () => {
+    const navigate = useNavigate()
+
+    const getAllAssistantsApi = useApi(assistantsApi.getAllAssistants)
+
+    const [isLoading, setLoading] = useState(true)
+    const [error, setError] = useState(null)
+    const [showDialog, setShowDialog] = useState(false)
+    const [dialogProps, setDialogProps] = useState({})
+
+    const [search, setSearch] = useState('')
+    const onSearchChange = (event) => {
+        setSearch(event.target.value)
+    }
+
+    const addNew = () => {
+        const dialogProp = {
+            title: 'Add New Custom Assistant',
+            type: 'ADD',
+            cancelButtonName: 'Cancel',
+            confirmButtonName: 'Add'
+        }
+        setDialogProps(dialogProp)
+        setShowDialog(true)
+    }
+
+    const onConfirm = (assistantId) => {
+        setShowDialog(false)
+        navigate(`/assistants/custom/${assistantId}`)
+    }
+
+    function filterAssistants(data) {
+        const parsedData = JSON.parse(data.details)
+        return parsedData && parsedData.name && parsedData.name.toLowerCase().indexOf(search.toLowerCase()) > -1
+    }
+
+    const getImages = (details) => {
+        const images = []
+        if (details && details.chatModel && details.chatModel.name) {
+            images.push(`${baseURL}/api/v1/node-icon/${details.chatModel.name}`)
+        }
+        return images
+    }
+
+    useEffect(() => {
+        getAllAssistantsApi.request('CUSTOM')
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    useEffect(() => {
+        setLoading(getAllAssistantsApi.loading)
+    }, [getAllAssistantsApi.loading])
+
+    useEffect(() => {
+        if (getAllAssistantsApi.error) {
+            setError(getAllAssistantsApi.error)
+        }
+    }, [getAllAssistantsApi.error])
+
+    return (
+        <>
+            <MainCard>
+                {error ? (
+                    <ErrorBoundary error={error} />
+                ) : (
+                    <Stack flexDirection='column' sx={{ gap: 3 }}>
+                        <ViewHeader
+                            isBackButton={true}
+                            onSearchChange={onSearchChange}
+                            search={true}
+                            searchPlaceholder='Search Assistants'
+                            title='Custom Assistant'
+                            onBack={() => navigate(-1)}
+                        >
+                            <StyledButton
+                                variant='contained'
+                                sx={{ borderRadius: 2, height: 40 }}
+                                onClick={addNew}
+                                startIcon={<IconPlus />}
+                            >
+                                Add
+                            </StyledButton>
+                        </ViewHeader>
+                        {isLoading ? (
+                            <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
+                                <Skeleton variant='rounded' height={160} />
+                                <Skeleton variant='rounded' height={160} />
+                                <Skeleton variant='rounded' height={160} />
+                            </Box>
+                        ) : (
+                            <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
+                                {getAllAssistantsApi.data &&
+                                    getAllAssistantsApi.data?.filter(filterAssistants).map((data, index) => (
+                                        <ItemCard
+                                            data={{
+                                                name: JSON.parse(data.details)?.name,
+                                                description: JSON.parse(data.details)?.instruction
+                                            }}
+                                            images={getImages(JSON.parse(data.details))}
+                                            key={index}
+                                            onClick={() => navigate('/assistants/custom/' + data.id)}
+                                        />
+                                    ))}
+                            </Box>
+                        )}
+                        {!isLoading && (!getAllAssistantsApi.data || getAllAssistantsApi.data.length === 0) && (
+                            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
+                                <Box sx={{ p: 2, height: 'auto' }}>
+                                    <img
+                                        style={{ objectFit: 'cover', height: '20vh', width: 'auto' }}
+                                        src={AssistantEmptySVG}
+                                        alt='AssistantEmptySVG'
+                                    />
+                                </Box>
+                                <div>No Custom Assistants Added Yet</div>
+                            </Stack>
+                        )}
+                    </Stack>
+                )}
+            </MainCard>
+            <AddCustomAssistantDialog
+                show={showDialog}
+                dialogProps={dialogProps}
+                onCancel={() => setShowDialog(false)}
+                onConfirm={onConfirm}
+                setError={setError}
+            ></AddCustomAssistantDialog>
+        </>
+    )
+}
+
+export default CustomAssistantLayout

packages/ui/src/views/assistants/custom/toolAgentFlow.js

@@ -0,0 +1,361 @@
+export const toolAgentFlow = {
+    nodes: [
+        {
+            id: 'bufferMemory_0',
+            data: {
+                id: 'bufferMemory_0',
+                label: 'Buffer Memory',
+                version: 2,
+                name: 'bufferMemory',
+                type: 'BufferMemory',
+                baseClasses: ['BufferMemory', 'BaseChatMemory', 'BaseMemory'],
+                category: 'Memory',
+                description: 'Retrieve chat messages stored in database',
+                inputParams: [
+                    {
+                        label: 'Session Id',
+                        name: 'sessionId',
+                        type: 'string',
+                        description:
+                            'If not specified, a random id will be used. Learn <a target="_blank" href="https://docs.flowiseai.com/memory#ui-and-embedded-chat">more</a>',
+                        default: '',
+                        additionalParams: true,
+                        optional: true,
+                        id: 'bufferMemory_0-input-sessionId-string'
+                    },
+                    {
+                        label: 'Memory Key',
+                        name: 'memoryKey',
+                        type: 'string',
+                        default: 'chat_history',
+                        additionalParams: true,
+                        id: 'bufferMemory_0-input-memoryKey-string'
+                    }
+                ],
+                inputAnchors: [],
+                inputs: {
+                    sessionId: '',
+                    memoryKey: 'chat_history'
+                },
+                outputAnchors: [
+                    {
+                        id: 'bufferMemory_0-output-bufferMemory-BufferMemory|BaseChatMemory|BaseMemory',
+                        name: 'bufferMemory',
+                        label: 'BufferMemory',
+                        description: 'Retrieve chat messages stored in database',
+                        type: 'BufferMemory | BaseChatMemory | BaseMemory'
+                    }
+                ],
+                outputs: {}
+            }
+        },
+        {
+            id: 'chatOpenAI_0',
+            data: {
+                id: 'chatOpenAI_0',
+                label: 'ChatOpenAI',
+                version: 8,
+                name: 'chatOpenAI',
+                type: 'ChatOpenAI',
+                baseClasses: ['ChatOpenAI', 'BaseChatModel', 'BaseLanguageModel', 'Runnable'],
+                category: 'Chat Models',
+                description: 'Wrapper around OpenAI large language models that use the Chat endpoint',
+                inputParams: [
+                    {
+                        label: 'Connect Credential',
+                        name: 'credential',
+                        type: 'credential',
+                        credentialNames: ['openAIApi'],
+                        id: 'chatOpenAI_0-input-credential-credential'
+                    },
+                    {
+                        label: 'Model Name',
+                        name: 'modelName',
+                        type: 'asyncOptions',
+                        loadMethod: 'listModels',
+                        default: 'gpt-4o-mini',
+                        id: 'chatOpenAI_0-input-modelName-asyncOptions'
+                    },
+                    {
+                        label: 'Temperature',
+                        name: 'temperature',
+                        type: 'number',
+                        step: 0.1,
+                        default: 0.9,
+                        optional: true,
+                        id: 'chatOpenAI_0-input-temperature-number'
+                    },
+                    {
+                        label: 'Streaming',
+                        name: 'streaming',
+                        type: 'boolean',
+                        default: true,
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-streaming-boolean'
+                    },
+                    {
+                        label: 'Max Tokens',
+                        name: 'maxTokens',
+                        type: 'number',
+                        step: 1,
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-maxTokens-number'
+                    },
+                    {
+                        label: 'Top Probability',
+                        name: 'topP',
+                        type: 'number',
+                        step: 0.1,
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-topP-number'
+                    },
+                    {
+                        label: 'Frequency Penalty',
+                        name: 'frequencyPenalty',
+                        type: 'number',
+                        step: 0.1,
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-frequencyPenalty-number'
+                    },
+                    {
+                        label: 'Presence Penalty',
+                        name: 'presencePenalty',
+                        type: 'number',
+                        step: 0.1,
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-presencePenalty-number'
+                    },
+                    {
+                        label: 'Timeout',
+                        name: 'timeout',
+                        type: 'number',
+                        step: 1,
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-timeout-number'
+                    },
+                    {
+                        label: 'BasePath',
+                        name: 'basepath',
+                        type: 'string',
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-basepath-string'
+                    },
+                    {
+                        label: 'Proxy Url',
+                        name: 'proxyUrl',
+                        type: 'string',
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-proxyUrl-string'
+                    },
+                    {
+                        label: 'Stop Sequence',
+                        name: 'stopSequence',
+                        type: 'string',
+                        rows: 4,
+                        optional: true,
+                        description: 'List of stop words to use when generating. Use comma to separate multiple stop words.',
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-stopSequence-string'
+                    },
+                    {
+                        label: 'BaseOptions',
+                        name: 'baseOptions',
+                        type: 'json',
+                        optional: true,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-baseOptions-json'
+                    },
+                    {
+                        label: 'Allow Image Uploads',
+                        name: 'allowImageUploads',
+                        type: 'boolean',
+                        description:
+                            'Allow image input. Refer to the <a href="https://docs.flowiseai.com/using-flowise/uploads#image" target="_blank">docs</a> for more details.',
+                        default: false,
+                        optional: true,
+                        id: 'chatOpenAI_0-input-allowImageUploads-boolean'
+                    },
+                    {
+                        label: 'Image Resolution',
+                        description: 'This parameter controls the resolution in which the model views the image.',
+                        name: 'imageResolution',
+                        type: 'options',
+                        options: [
+                            {
+                                label: 'Low',
+                                name: 'low'
+                            },
+                            {
+                                label: 'High',
+                                name: 'high'
+                            },
+                            {
+                                label: 'Auto',
+                                name: 'auto'
+                            }
+                        ],
+                        default: 'low',
+                        optional: false,
+                        additionalParams: true,
+                        id: 'chatOpenAI_0-input-imageResolution-options'
+                    }
+                ],
+                inputAnchors: [
+                    {
+                        label: 'Cache',
+                        name: 'cache',
+                        type: 'BaseCache',
+                        optional: true,
+                        id: 'chatOpenAI_0-input-cache-BaseCache'
+                    }
+                ],
+                inputs: {
+                    cache: '',
+                    modelName: 'gpt-4o-mini',
+                    temperature: 0.9,
+                    streaming: true,
+                    maxTokens: '',
+                    topP: '',
+                    frequencyPenalty: '',
+                    presencePenalty: '',
+                    timeout: '',
+                    basepath: '',
+                    proxyUrl: '',
+                    stopSequence: '',
+                    baseOptions: '',
+                    allowImageUploads: '',
+                    imageResolution: 'low'
+                },
+                outputAnchors: [
+                    {
+                        id: 'chatOpenAI_0-output-chatOpenAI-ChatOpenAI|BaseChatModel|BaseLanguageModel|Runnable',
+                        name: 'chatOpenAI',
+                        label: 'ChatOpenAI',
+                        description: 'Wrapper around OpenAI large language models that use the Chat endpoint',
+                        type: 'ChatOpenAI | BaseChatModel | BaseLanguageModel | Runnable'
+                    }
+                ],
+                outputs: {}
+            }
+        },
+        {
+            id: 'toolAgent_0',
+            data: {
+                id: 'toolAgent_0',
+                label: 'Tool Agent',
+                version: 2,
+                name: 'toolAgent',
+                type: 'AgentExecutor',
+                baseClasses: ['AgentExecutor', 'BaseChain', 'Runnable'],
+                category: 'Agents',
+                description: 'Agent that uses Function Calling to pick the tools and args to call',
+                inputParams: [
+                    {
+                        label: 'System Message',
+                        name: 'systemMessage',
+                        type: 'string',
+                        default: 'You are a helpful AI assistant.',
+                        description: 'If Chat Prompt Template is provided, this will be ignored',
+                        rows: 4,
+                        optional: true,
+                        additionalParams: true,
+                        id: 'toolAgent_0-input-systemMessage-string'
+                    },
+                    {
+                        label: 'Max Iterations',
+                        name: 'maxIterations',
+                        type: 'number',
+                        optional: true,
+                        additionalParams: true,
+                        id: 'toolAgent_0-input-maxIterations-number'
+                    }
+                ],
+                inputAnchors: [
+                    {
+                        label: 'Tools',
+                        name: 'tools',
+                        type: 'Tool',
+                        list: true,
+                        id: 'toolAgent_0-input-tools-Tool'
+                    },
+                    {
+                        label: 'Memory',
+                        name: 'memory',
+                        type: 'BaseChatMemory',
+                        id: 'toolAgent_0-input-memory-BaseChatMemory'
+                    },
+                    {
+                        label: 'Tool Calling Chat Model',
+                        name: 'model',
+                        type: 'BaseChatModel',
+                        description:
+                            'Only compatible with models that are capable of function calling: ChatOpenAI, ChatMistral, ChatAnthropic, ChatGoogleGenerativeAI, ChatVertexAI, GroqChat',
+                        id: 'toolAgent_0-input-model-BaseChatModel'
+                    },
+                    {
+                        label: 'Chat Prompt Template',
+                        name: 'chatPromptTemplate',
+                        type: 'ChatPromptTemplate',
+                        description: 'Override existing prompt with Chat Prompt Template. Human Message must includes {input} variable',
+                        optional: true,
+                        id: 'toolAgent_0-input-chatPromptTemplate-ChatPromptTemplate'
+                    },
+                    {
+                        label: 'Input Moderation',
+                        description: 'Detect text that could generate harmful output and prevent it from being sent to the language model',
+                        name: 'inputModeration',
+                        type: 'Moderation',
+                        optional: true,
+                        list: true,
+                        id: 'toolAgent_0-input-inputModeration-Moderation'
+                    }
+                ],
+                inputs: {
+                    tools: [],
+                    memory: '{{bufferMemory_0.data.instance}}',
+                    model: '{{chatOpenAI_0.data.instance}}',
+                    chatPromptTemplate: '',
+                    systemMessage: 'You are helpful assistant',
+                    inputModeration: '',
+                    maxIterations: ''
+                },
+                outputAnchors: [
+                    {
+                        id: 'toolAgent_0-output-toolAgent-AgentExecutor|BaseChain|Runnable',
+                        name: 'toolAgent',
+                        label: 'AgentExecutor',
+                        description: 'Agent that uses Function Calling to pick the tools and args to call',
+                        type: 'AgentExecutor | BaseChain | Runnable'
+                    }
+                ],
+                outputs: {}
+            }
+        }
+    ],
+    edges: [
+        {
+            source: 'bufferMemory_0',
+            sourceHandle: 'bufferMemory_0-output-bufferMemory-BufferMemory|BaseChatMemory|BaseMemory',
+            target: 'toolAgent_0',
+            targetHandle: 'toolAgent_0-input-memory-BaseChatMemory',
+            type: 'buttonedge',
+            id: 'bufferMemory_0-bufferMemory_0-output-bufferMemory-BufferMemory|BaseChatMemory|BaseMemory-toolAgent_0-toolAgent_0-input-memory-BaseChatMemory'
+        },
+        {
+            source: 'chatOpenAI_0',
+            sourceHandle: 'chatOpenAI_0-output-chatOpenAI-ChatOpenAI|BaseChatModel|BaseLanguageModel|Runnable',
+            target: 'toolAgent_0',
+            targetHandle: 'toolAgent_0-input-model-BaseChatModel',
+            type: 'buttonedge',
+            id: 'chatOpenAI_0-chatOpenAI_0-output-chatOpenAI-ChatOpenAI|BaseChatModel|BaseLanguageModel|Runnable-toolAgent_0-toolAgent_0-input-model-BaseChatModel'
+        }
+    ]
+}

packages/ui/src/views/assistants/index.jsx

@@ -1,190 +1,131 @@
-import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
 // material-ui
-import { Box, Stack, Button, Skeleton } from '@mui/material'
+import { Card, CardContent, Stack } from '@mui/material'
+import { useTheme, styled } from '@mui/material/styles'
 
 // project imports
 import MainCard from '@/ui-component/cards/MainCard'
-import ItemCard from '@/ui-component/cards/ItemCard'
-import { gridSpacing } from '@/store/constant'
-import AssistantEmptySVG from '@/assets/images/assistant_empty.svg'
-import { StyledButton } from '@/ui-component/button/StyledButton'
-import AssistantDialog from './AssistantDialog'
-import LoadAssistantDialog from './LoadAssistantDialog'
-
-// API
-import assistantsApi from '@/api/assistants'
-
-// Hooks
-import useApi from '@/hooks/useApi'
+import ViewHeader from '@/layout/MainLayout/ViewHeader'
 
 // icons
-import { IconPlus, IconFileUpload } from '@tabler/icons-react'
-import ViewHeader from '@/layout/MainLayout/ViewHeader'
-import ErrorBoundary from '@/ErrorBoundary'
+import { IconRobotFace, IconBrandOpenai, IconBrandAzure } from '@tabler/icons-react'
 
-// ==============================|| CHATFLOWS ||============================== //
+const cards = [
+    {
+        title: 'Custom Assistant',
+        description: 'Create custom assistant using your choice of LLMs',
+        icon: <IconRobotFace />,
+        iconText: 'Custom',
+        gradient: 'linear-gradient(135deg, #fff8e14e 0%, #ffcc802f 100%)'
+    },
+    {
+        title: 'OpenAI Assistant',
+        description: 'Create assistant using OpenAI Assistant API',
+        icon: <IconBrandOpenai />,
+        iconText: 'OpenAI',
+        gradient: 'linear-gradient(135deg, #c9ffd85f 0%, #a0f0b567 100%)'
+    },
+    {
+        title: 'Azure Assistant (Coming Soon)',
+        description: 'Create assistant using Azure Assistant API',
+        icon: <IconBrandAzure />,
+        iconText: 'Azure',
+        gradient: 'linear-gradient(135deg, #c4e1ff57 0%, #80b7ff5a 100%)'
+    }
+]
+
+const StyledCard = styled(Card)(({ gradient }) => ({
+    height: '300px',
+    background: gradient,
+    position: 'relative',
+    overflow: 'hidden',
+    transition: 'transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
+    cursor: 'pointer'
+}))
+
+const FeatureIcon = styled('div')(() => ({
+    display: 'inline-flex',
+    padding: '4px 8px',
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+    borderRadius: '4px',
+    marginBottom: '16px',
+    '& svg': {
+        width: '1.2rem',
+        height: '1.2rem',
+        marginRight: '8px'
+    }
+}))
+
+const FeatureCards = () => {
+    const navigate = useNavigate()
+    const theme = useTheme()
+    const customization = useSelector((state) => state.customization)
+
+    const onCardClick = (index) => {
+        if (index === 0) navigate('/assistants/custom')
+        if (index === 1) navigate('/assistants/openai')
+        if (index === 2) alert('Under Development')
+    }
+
+    return (
+        <Stack
+            spacing={3}
+            direction='row'
+            sx={{
+                width: '100%',
+                justifyContent: 'space-between'
+            }}
+        >
+            {cards.map((card, index) => (
+                <StyledCard
+                    key={index}
+                    gradient={card.gradient}
+                    sx={{
+                        flex: 1,
+                        maxWidth: 'calc((100% - 2 * 16px) / 3)',
+                        height: 'auto',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        border: 1,
+                        borderColor: theme.palette.grey[900] + 25,
+                        borderRadius: 2,
+                        color: customization.isDarkMode ? theme.palette.common.white : '#333333',
+                        cursor: index === 2 ? 'not-allowed' : 'pointer',
+                        opacity: index === 2 ? 0.6 : 1,
+                        '&:hover': {
+                            boxShadow: index === 2 ? 'none' : '0 4px 20px rgba(0, 0, 0, 0.1)'
+                        }
+                    }}
+                    onClick={() => index !== 2 && onCardClick(index)}
+                >
+                    <CardContent className='h-full relative z-10'>
+                        <FeatureIcon>
+                            {card.icon}
+                            <span className='text-xs uppercase'>{card.iconText}</span>
+                        </FeatureIcon>
+                        <h2 className='text-2xl font-bold mb-2'>{card.title}</h2>
+                        <p className='text-gray-600'>{card.description}</p>
+                    </CardContent>
+                </StyledCard>
+            ))}
+        </Stack>
+    )
+}
+
+// ==============================|| ASSISTANTS ||============================== //
 
 const Assistants = () => {
-    const getAllAssistantsApi = useApi(assistantsApi.getAllAssistants)
-
-    const [isLoading, setLoading] = useState(true)
-    const [error, setError] = useState(null)
-    const [showDialog, setShowDialog] = useState(false)
-    const [dialogProps, setDialogProps] = useState({})
-    const [showLoadDialog, setShowLoadDialog] = useState(false)
-    const [loadDialogProps, setLoadDialogProps] = useState({})
-
-    const loadExisting = () => {
-        const dialogProp = {
-            title: 'Load Existing Assistant'
-        }
-        setLoadDialogProps(dialogProp)
-        setShowLoadDialog(true)
-    }
-
-    const [search, setSearch] = useState('')
-    const onSearchChange = (event) => {
-        setSearch(event.target.value)
-    }
-
-    const onAssistantSelected = (selectedOpenAIAssistantId, credential) => {
-        setShowLoadDialog(false)
-        addNew(selectedOpenAIAssistantId, credential)
-    }
-
-    const addNew = (selectedOpenAIAssistantId, credential) => {
-        const dialogProp = {
-            title: 'Add New Assistant',
-            type: 'ADD',
-            cancelButtonName: 'Cancel',
-            confirmButtonName: 'Add',
-            selectedOpenAIAssistantId,
-            credential
-        }
-        setDialogProps(dialogProp)
-        setShowDialog(true)
-    }
-
-    const edit = (selectedAssistant) => {
-        const dialogProp = {
-            title: 'Edit Assistant',
-            type: 'EDIT',
-            cancelButtonName: 'Cancel',
-            confirmButtonName: 'Save',
-            data: selectedAssistant
-        }
-        setDialogProps(dialogProp)
-        setShowDialog(true)
-    }
-
-    const onConfirm = () => {
-        setShowDialog(false)
-        getAllAssistantsApi.request()
-    }
-
-    function filterAssistants(data) {
-        const parsedData = JSON.parse(data.details)
-        return parsedData && parsedData.name && parsedData.name.toLowerCase().indexOf(search.toLowerCase()) > -1
-    }
-
-    useEffect(() => {
-        getAllAssistantsApi.request()
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
-    useEffect(() => {
-        setLoading(getAllAssistantsApi.loading)
-    }, [getAllAssistantsApi.loading])
-
-    useEffect(() => {
-        if (getAllAssistantsApi.error) {
-            setError(getAllAssistantsApi.error)
-        }
-    }, [getAllAssistantsApi.error])
-
     return (
         <>
             <MainCard>
-                {error ? (
-                    <ErrorBoundary error={error} />
-                ) : (
-                    <Stack flexDirection='column' sx={{ gap: 3 }}>
-                        <ViewHeader
-                            onSearchChange={onSearchChange}
-                            search={true}
-                            searchPlaceholder='Search Assistants'
-                            title='OpenAI Assistants'
-                        >
-                            <Button
-                                variant='outlined'
-                                onClick={loadExisting}
-                                startIcon={<IconFileUpload />}
-                                sx={{ borderRadius: 2, height: 40 }}
-                            >
-                                Load
-                            </Button>
-                            <StyledButton
-                                variant='contained'
-                                sx={{ borderRadius: 2, height: 40 }}
-                                onClick={addNew}
-                                startIcon={<IconPlus />}
-                            >
-                                Add
-                            </StyledButton>
-                        </ViewHeader>
-                        {isLoading ? (
-                            <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
-                                <Skeleton variant='rounded' height={160} />
-                                <Skeleton variant='rounded' height={160} />
-                                <Skeleton variant='rounded' height={160} />
-                            </Box>
-                        ) : (
-                            <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
-                                {getAllAssistantsApi.data &&
-                                    getAllAssistantsApi.data?.filter(filterAssistants).map((data, index) => (
-                                        <ItemCard
-                                            data={{
-                                                name: JSON.parse(data.details)?.name,
-                                                description: JSON.parse(data.details)?.instructions,
-                                                iconSrc: data.iconSrc
-                                            }}
-                                            key={index}
-                                            onClick={() => edit(data)}
-                                        />
-                                    ))}
-                            </Box>
-                        )}
-                        {!isLoading && (!getAllAssistantsApi.data || getAllAssistantsApi.data.length === 0) && (
-                            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
-                                <Box sx={{ p: 2, height: 'auto' }}>
-                                    <img
-                                        style={{ objectFit: 'cover', height: '20vh', width: 'auto' }}
-                                        src={AssistantEmptySVG}
-                                        alt='AssistantEmptySVG'
-                                    />
-                                </Box>
-                                <div>No Assistants Added Yet</div>
-                            </Stack>
-                        )}
-                    </Stack>
-                )}
+                <Stack flexDirection='column' sx={{ gap: 3 }}>
+                    <ViewHeader title='Assistants' />
+                    <FeatureCards />
+                </Stack>
             </MainCard>
-            <LoadAssistantDialog
-                show={showLoadDialog}
-                dialogProps={loadDialogProps}
-                onCancel={() => setShowLoadDialog(false)}
-                onAssistantSelected={onAssistantSelected}
-                setError={setError}
-            ></LoadAssistantDialog>
-            <AssistantDialog
-                show={showDialog}
-                dialogProps={dialogProps}
-                onCancel={() => setShowDialog(false)}
-                onConfirm={onConfirm}
-                setError={setError}
-            ></AssistantDialog>
         </>
     )
 }

packages/ui/src/views/assistants/openai/AssistantDialog.jsx

@@ -338,7 +338,8 @@ const AssistantDialog = ({ show, dialogProps, onCancel, onConfirm, setError }) =
             const obj = {
                 details: JSON.stringify(assistantDetails),
                 iconSrc: assistantIcon,
-                credential: assistantCredential
+                credential: assistantCredential,
+                type: 'OPENAI'
             }
 
             const createResp = await assistantsApi.createNewAssistant(obj)

packages/ui/src/views/assistants/openai/OpenAIAssistantLayout.jsx

@@ -0,0 +1,197 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+// material-ui
+import { Box, Stack, Button, Skeleton } from '@mui/material'
+
+// project imports
+import MainCard from '@/ui-component/cards/MainCard'
+import ItemCard from '@/ui-component/cards/ItemCard'
+import { StyledButton } from '@/ui-component/button/StyledButton'
+import AssistantDialog from './AssistantDialog'
+import LoadAssistantDialog from './LoadAssistantDialog'
+import ViewHeader from '@/layout/MainLayout/ViewHeader'
+import ErrorBoundary from '@/ErrorBoundary'
+
+// API
+import assistantsApi from '@/api/assistants'
+
+// Hooks
+import useApi from '@/hooks/useApi'
+
+// icons
+import { IconPlus, IconFileUpload } from '@tabler/icons-react'
+import AssistantEmptySVG from '@/assets/images/assistant_empty.svg'
+import { gridSpacing } from '@/store/constant'
+
+// ==============================|| OpenAIAssistantLayout ||============================== //
+
+const OpenAIAssistantLayout = () => {
+    const navigate = useNavigate()
+
+    const getAllAssistantsApi = useApi(assistantsApi.getAllAssistants)
+
+    const [isLoading, setLoading] = useState(true)
+    const [error, setError] = useState(null)
+    const [showDialog, setShowDialog] = useState(false)
+    const [dialogProps, setDialogProps] = useState({})
+    const [showLoadDialog, setShowLoadDialog] = useState(false)
+    const [loadDialogProps, setLoadDialogProps] = useState({})
+
+    const loadExisting = () => {
+        const dialogProp = {
+            title: 'Load Existing Assistant'
+        }
+        setLoadDialogProps(dialogProp)
+        setShowLoadDialog(true)
+    }
+
+    const [search, setSearch] = useState('')
+    const onSearchChange = (event) => {
+        setSearch(event.target.value)
+    }
+
+    const onAssistantSelected = (selectedOpenAIAssistantId, credential) => {
+        setShowLoadDialog(false)
+        addNew(selectedOpenAIAssistantId, credential)
+    }
+
+    const addNew = (selectedOpenAIAssistantId, credential) => {
+        const dialogProp = {
+            title: 'Add New Assistant',
+            type: 'ADD',
+            cancelButtonName: 'Cancel',
+            confirmButtonName: 'Add',
+            selectedOpenAIAssistantId,
+            credential
+        }
+        setDialogProps(dialogProp)
+        setShowDialog(true)
+    }
+
+    const edit = (selectedAssistant) => {
+        const dialogProp = {
+            title: 'Edit Assistant',
+            type: 'EDIT',
+            cancelButtonName: 'Cancel',
+            confirmButtonName: 'Save',
+            data: selectedAssistant
+        }
+        setDialogProps(dialogProp)
+        setShowDialog(true)
+    }
+
+    const onConfirm = () => {
+        setShowDialog(false)
+        getAllAssistantsApi.request('OPENAI')
+    }
+
+    function filterAssistants(data) {
+        const parsedData = JSON.parse(data.details)
+        return parsedData && parsedData.name && parsedData.name.toLowerCase().indexOf(search.toLowerCase()) > -1
+    }
+
+    useEffect(() => {
+        getAllAssistantsApi.request('OPENAI')
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    useEffect(() => {
+        setLoading(getAllAssistantsApi.loading)
+    }, [getAllAssistantsApi.loading])
+
+    useEffect(() => {
+        if (getAllAssistantsApi.error) {
+            setError(getAllAssistantsApi.error)
+        }
+    }, [getAllAssistantsApi.error])
+
+    return (
+        <>
+            <MainCard>
+                {error ? (
+                    <ErrorBoundary error={error} />
+                ) : (
+                    <Stack flexDirection='column' sx={{ gap: 3 }}>
+                        <ViewHeader
+                            isBackButton={true}
+                            onSearchChange={onSearchChange}
+                            search={true}
+                            searchPlaceholder='Search Assistants'
+                            title='OpenAI Assistant'
+                            onBack={() => navigate(-1)}
+                        >
+                            <Button
+                                variant='outlined'
+                                onClick={loadExisting}
+                                startIcon={<IconFileUpload />}
+                                sx={{ borderRadius: 2, height: 40 }}
+                            >
+                                Load
+                            </Button>
+                            <StyledButton
+                                variant='contained'
+                                sx={{ borderRadius: 2, height: 40 }}
+                                onClick={addNew}
+                                startIcon={<IconPlus />}
+                            >
+                                Add
+                            </StyledButton>
+                        </ViewHeader>
+                        {isLoading ? (
+                            <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
+                                <Skeleton variant='rounded' height={160} />
+                                <Skeleton variant='rounded' height={160} />
+                                <Skeleton variant='rounded' height={160} />
+                            </Box>
+                        ) : (
+                            <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
+                                {getAllAssistantsApi.data &&
+                                    getAllAssistantsApi.data?.filter(filterAssistants).map((data, index) => (
+                                        <ItemCard
+                                            data={{
+                                                name: JSON.parse(data.details)?.name,
+                                                description: JSON.parse(data.details)?.instructions,
+                                                iconSrc: data.iconSrc
+                                            }}
+                                            key={index}
+                                            onClick={() => edit(data)}
+                                        />
+                                    ))}
+                            </Box>
+                        )}
+                        {!isLoading && (!getAllAssistantsApi.data || getAllAssistantsApi.data.length === 0) && (
+                            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
+                                <Box sx={{ p: 2, height: 'auto' }}>
+                                    <img
+                                        style={{ objectFit: 'cover', height: '20vh', width: 'auto' }}
+                                        src={AssistantEmptySVG}
+                                        alt='AssistantEmptySVG'
+                                    />
+                                </Box>
+                                <div>No OpenAI Assistants Added Yet</div>
+                            </Stack>
+                        )}
+                    </Stack>
+                )}
+            </MainCard>
+            <LoadAssistantDialog
+                show={showLoadDialog}
+                dialogProps={loadDialogProps}
+                onCancel={() => setShowLoadDialog(false)}
+                onAssistantSelected={onAssistantSelected}
+                setError={setError}
+            ></LoadAssistantDialog>
+            <AssistantDialog
+                show={showDialog}
+                dialogProps={dialogProps}
+                onCancel={() => setShowDialog(false)}
+                onConfirm={onConfirm}
+                setError={setError}
+            ></AssistantDialog>
+        </>
+    )
+}
+
+export default OpenAIAssistantLayout

packages/ui/src/views/canvas/CanvasHeader.jsx

@@ -17,6 +17,8 @@ import APICodeDialog from '@/views/chatflows/APICodeDialog'
 import ViewMessagesDialog from '@/ui-component/dialog/ViewMessagesDialog'
 import ChatflowConfigurationDialog from '@/ui-component/dialog/ChatflowConfigurationDialog'
 import UpsertHistoryDialog from '@/views/vectorstore/UpsertHistoryDialog'
+import ViewLeadsDialog from '@/ui-component/dialog/ViewLeadsDialog'
+import ExportAsTemplateDialog from '@/ui-component/dialog/ExportAsTemplateDialog'
 
 // API
 import chatflowsApi from '@/api/chatflows'
@@ -28,8 +30,6 @@ import useApi from '@/hooks/useApi'
 import { generateExportFlowData } from '@/utils/genericHelper'
 import { uiBaseURL } from '@/store/constant'
 import { closeSnackbar as closeSnackbarAction, enqueueSnackbar as enqueueSnackbarAction, SET_CHATFLOW } from '@/store/actions'
-import ViewLeadsDialog from '@/ui-component/dialog/ViewLeadsDialog'
-import ExportAsTemplateDialog from '@/ui-component/dialog/ExportAsTemplateDialog'
 
 // ==============================|| CANVAS HEADER ||============================== //
 
@@ -130,7 +130,9 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, handleSaveFlow, handleDeleteFlo
             try {
                 const flowData = JSON.parse(chatflow.flowData)
                 let dataStr = JSON.stringify(generateExportFlowData(flowData), null, 2)
-                let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+                //let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+                const blob = new Blob([dataStr], { type: 'application/json' })
+                const dataUri = URL.createObjectURL(blob)
 
                 let exportFileDefaultName = `${chatflow.name} ${title}.json`
 

packages/ui/src/views/canvas/NodeInputHandler.jsx

@@ -29,7 +29,7 @@ import { TabPanel } from '@/ui-component/tabs/TabPanel'
 import { TabsList } from '@/ui-component/tabs/TabsList'
 import { Tab } from '@/ui-component/tabs/Tab'
 import ToolDialog from '@/views/tools/ToolDialog'
-import AssistantDialog from '@/views/assistants/AssistantDialog'
+import AssistantDialog from '@/views/assistants/openai/AssistantDialog'
 import FormatPromptValuesDialog from '@/ui-component/dialog/FormatPromptValuesDialog'
 import ExpandTextDialog from '@/ui-component/dialog/ExpandTextDialog'
 import ConditionDialog from '@/ui-component/dialog/ConditionDialog'

packages/ui/src/views/chatflows/index.jsx

@@ -58,7 +58,8 @@ const Chatflows = () => {
     function filterFlows(data) {
         return (
             data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
-            (data.category && data.category.toLowerCase().indexOf(search.toLowerCase()) > -1)
+            (data.category && data.category.toLowerCase().indexOf(search.toLowerCase()) > -1) ||
+            data.id.toLowerCase().indexOf(search.toLowerCase()) > -1
         )
     }
 

packages/ui/src/views/docstore/DocStoreInputHandler.jsx

@@ -70,6 +70,14 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
         data.inputs[inputParamName] = newValue
     }
 
+    const getCredential = () => {
+        const credential = data.inputs.credential || data.inputs[FLOWISE_CREDENTIAL_ID]
+        if (credential) {
+            return { credential }
+        }
+        return {}
+    }
+
     return (
         <div>
             {inputParam && (
@@ -120,7 +128,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
                             <CredentialInputHandler
                                 key={JSON.stringify(inputParam)}
                                 disabled={disabled}
-                                data={data.inputs.credential ? { credential: data.inputs.credential } : {}}
+                                data={getCredential()}
                                 inputParam={inputParam}
                                 onSelect={(newValue) => {
                                     data.credential = newValue

packages/ui/src/views/settings/index.jsx

@@ -15,10 +15,11 @@ import MainCard from '@/ui-component/cards/MainCard'
 import Transitions from '@/ui-component/extended/Transitions'
 import settings from '@/menu-items/settings'
 import agentsettings from '@/menu-items/agentsettings'
+import customAssistantSettings from '@/menu-items/customassistant'
 
 // ==============================|| SETTINGS ||============================== //
 
-const Settings = ({ chatflow, isSettingsOpen, anchorEl, isAgentCanvas, onSettingsItemClick, onUploadFile, onClose }) => {
+const Settings = ({ chatflow, isSettingsOpen, isCustomAssistant, anchorEl, isAgentCanvas, onSettingsItemClick, onUploadFile, onClose }) => {
     const theme = useTheme()
     const [settingsMenu, setSettingsMenu] = useState([])
     const customization = useSelector((state) => state.customization)
@@ -47,11 +48,15 @@ const Settings = ({ chatflow, isSettingsOpen, anchorEl, isAgentCanvas, onSetting
             const settingsMenu = menus.children.filter((menu) => menu.id === 'loadChatflow')
             setSettingsMenu(settingsMenu)
         } else if (chatflow && chatflow.id) {
-            const menus = isAgentCanvas ? agentsettings : settings
-            const settingsMenu = menus.children
-            setSettingsMenu(settingsMenu)
+            if (isCustomAssistant) {
+                const menus = customAssistantSettings
+                setSettingsMenu(menus.children)
+            } else {
+                const menus = isAgentCanvas ? agentsettings : settings
+                setSettingsMenu(menus.children)
+            }
         }
-    }, [chatflow, isAgentCanvas])
+    }, [chatflow, isAgentCanvas, isCustomAssistant])
 
     useEffect(() => {
         setOpen(isSettingsOpen)
@@ -147,6 +152,7 @@ const Settings = ({ chatflow, isSettingsOpen, anchorEl, isAgentCanvas, onSetting
 Settings.propTypes = {
     chatflow: PropTypes.object,
     isSettingsOpen: PropTypes.bool,
+    isCustomAssistant: PropTypes.bool,
     anchorEl: PropTypes.any,
     onSettingsItemClick: PropTypes.func,
     onUploadFile: PropTypes.func,

packages/ui/src/views/tools/ToolDialog.jsx

@@ -240,7 +240,9 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
                 delete toolData.createdDate
                 delete toolData.updatedDate
                 let dataStr = JSON.stringify(toolData, null, 2)
-                let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+                //let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+                const blob = new Blob([dataStr], { type: 'application/json' })
+                const dataUri = URL.createObjectURL(blob)
 
                 let exportFileDefaultName = `${toolName}-CustomTool.json`