diff --git a/packages/components/nodes/chatmodels/AWSBedrock/AWSChatBedrock.ts b/packages/components/nodes/chatmodels/AWSBedrock/AWSChatBedrock.ts index 9ecad7df4ca..b48bc7f0dc1 100644 --- a/packages/components/nodes/chatmodels/AWSBedrock/AWSChatBedrock.ts +++ b/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', diff --git a/packages/server/src/Interface.ts b/packages/server/src/Interface.ts index 73708439fd2..72cee13a868 100644 --- a/packages/server/src/Interface.ts +++ b/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', diff --git a/packages/server/src/controllers/assistants/index.ts b/packages/server/src/controllers/assistants/index.ts index c252dc56616..2180a4c7f12 100644 --- a/packages/server/src/controllers/assistants/index.ts +++ b/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 } diff --git a/packages/server/src/controllers/documentstore/index.ts b/packages/server/src/controllers/documentstore/index.ts index 6d56fa18483..2499cb301df 100644 --- a/packages/server/src/controllers/documentstore/index.ts +++ b/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 } diff --git a/packages/server/src/database/entities/Assistant.ts b/packages/server/src/database/entities/Assistant.ts index e6be9edf2f4..2b4a6d3bf4c 100644 --- a/packages/server/src/database/entities/Assistant.ts +++ b/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 diff --git a/packages/server/src/database/migrations/mariadb/1733011290987-AddTypeToAssistant.ts b/packages/server/src/database/migrations/mariadb/1733011290987-AddTypeToAssistant.ts new file mode 100644 index 00000000000..8726486c54a --- /dev/null +++ b/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 { + 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 { + await queryRunner.query(`ALTER TABLE \`assistant\` DROP COLUMN \`type\`;`) + } +} diff --git a/packages/server/src/database/migrations/mariadb/index.ts b/packages/server/src/database/migrations/mariadb/index.ts index cf246a644a4..00e1237e446 100644 --- a/packages/server/src/database/migrations/mariadb/index.ts +++ b/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 ] diff --git a/packages/server/src/database/migrations/mysql/1733011290987-AddTypeToAssistant.ts b/packages/server/src/database/migrations/mysql/1733011290987-AddTypeToAssistant.ts new file mode 100644 index 00000000000..8726486c54a --- /dev/null +++ b/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 { + 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 { + await queryRunner.query(`ALTER TABLE \`assistant\` DROP COLUMN \`type\`;`) + } +} diff --git a/packages/server/src/database/migrations/mysql/index.ts b/packages/server/src/database/migrations/mysql/index.ts index 9ac9354ae16..4b0bab41500 100644 --- a/packages/server/src/database/migrations/mysql/index.ts +++ b/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 ] diff --git a/packages/server/src/database/migrations/postgres/1733011290987-AddTypeToAssistant.ts b/packages/server/src/database/migrations/postgres/1733011290987-AddTypeToAssistant.ts new file mode 100644 index 00000000000..30a007b13b4 --- /dev/null +++ b/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 { + 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 { + await queryRunner.query(`ALTER TABLE "assistant" DROP COLUMN "type";`) + } +} diff --git a/packages/server/src/database/migrations/postgres/index.ts b/packages/server/src/database/migrations/postgres/index.ts index 464bcaaba05..0b5718db697 100644 --- a/packages/server/src/database/migrations/postgres/index.ts +++ b/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 ] diff --git a/packages/server/src/database/migrations/sqlite/1733011290987-AddTypeToAssistant.ts b/packages/server/src/database/migrations/sqlite/1733011290987-AddTypeToAssistant.ts new file mode 100644 index 00000000000..30a007b13b4 --- /dev/null +++ b/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 { + 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 { + await queryRunner.query(`ALTER TABLE "assistant" DROP COLUMN "type";`) + } +} diff --git a/packages/server/src/database/migrations/sqlite/index.ts b/packages/server/src/database/migrations/sqlite/index.ts index 75a90029719..b7b1d2b7d55 100644 --- a/packages/server/src/database/migrations/sqlite/index.ts +++ b/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 ] diff --git a/packages/server/src/routes/assistants/index.ts b/packages/server/src/routes/assistants/index.ts index 7b01cdd0111..f7754bcac8f 100644 --- a/packages/server/src/routes/assistants/index.ts +++ b/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 diff --git a/packages/server/src/routes/documentstore/index.ts b/packages/server/src/routes/documentstore/index.ts index e0892cfc404..1d1bad89e0a 100644 --- a/packages/server/src/routes/documentstore/index.ts +++ b/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 diff --git a/packages/server/src/services/assistants/index.ts b/packages/server/src/services/assistants/index.ts index 28c3bd73687..424440bafd8 100644 --- a/packages/server/src/services/assistants/index.ts +++ b/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 => { try { @@ -17,6 +23,24 @@ const createAssistant = async (requestBody: any): Promise => { 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 => { +const getAllAssistants = async (type?: AssistantType): Promise => { 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[], queryRunner } catch (error) { throw new InternalFlowiseError( StatusCodes.INTERNAL_SERVER_ERROR, - `Error: variableService.importVariables - ${getErrorMessage(error)}` + `Error: assistantsService.importAssistants - ${getErrorMessage(error)}` + ) + } +} + +const getChatModels = async (): Promise => { + 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 => { + 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 => { + 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 => { + 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 } diff --git a/packages/server/src/services/documentstore/index.ts b/packages/server/src/services/documentstore/index.ts index cb7b3e8361f..e433b3b7754 100644 --- a/packages/server/src/services/documentstore/index.ts +++ b/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 => { + 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 } diff --git a/packages/server/src/utils/prompt.ts b/packages/server/src/utils/prompt.ts new file mode 100644 index 00000000000..a2862042f86 --- /dev/null +++ b/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}} + + +# 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} + + +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.` diff --git a/packages/ui/src/api/assistants.js b/packages/ui/src/api/assistants.js index cff722dbb86..bdfeecd515a 100644 --- a/packages/ui/src/api/assistants.js +++ b/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 } diff --git a/packages/ui/src/api/documentstore.js b/packages/ui/src/api/documentstore.js index 90951183013..e53ab50c69e 100644 --- a/packages/ui/src/api/documentstore.js +++ b/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 } diff --git a/packages/ui/src/layout/MainLayout/Sidebar/index.jsx b/packages/ui/src/layout/MainLayout/Sidebar/index.jsx index efdda72c6de..5d1908c8b28 100644 --- a/packages/ui/src/layout/MainLayout/Sidebar/index.jsx +++ b/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 }} diff --git a/packages/ui/src/menu-items/customassistant.js b/packages/ui/src/menu-items/customassistant.js new file mode 100644 index 00000000000..328b4adfcf8 --- /dev/null +++ b/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 diff --git a/packages/ui/src/menu-items/dashboard.js b/packages/ui/src/menu-items/dashboard.js index 95992e9648a..d4d8d108a31 100644 --- a/packages/ui/src/menu-items/dashboard.js +++ b/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', diff --git a/packages/ui/src/routes/MainRoutes.jsx b/packages/ui/src/routes/MainRoutes.jsx index be916f034e9..ad60cb77565 100644 --- a/packages/ui/src/routes/MainRoutes.jsx +++ b/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: }, + { + path: '/assistants/custom', + element: + }, + { + path: '/assistants/custom/:id', + element: + }, + { + path: '/assistants/openai', + element: + }, { path: '/credentials', element: diff --git a/packages/ui/src/ui-component/button/FlowListMenu.jsx b/packages/ui/src/ui-component/button/FlowListMenu.jsx index c720c53c610..f633655974a 100644 --- a/packages/ui/src/ui-component/button/FlowListMenu.jsx +++ b/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` diff --git a/packages/ui/src/ui-component/dialog/PromptGeneratorDialog.jsx b/packages/ui/src/ui-component/dialog/PromptGeneratorDialog.jsx new file mode 100644 index 00000000000..1b0e3e48397 --- /dev/null +++ b/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: + }, + { + text: 'Translate the language', + img: + }, + { + text: 'Write me an email', + img: + }, + { + text: 'Convert the code to another language', + img: + }, + { + text: 'Research and generate a report', + img: + }, + { + text: 'Plan a trip', + img: + } +] + +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) => ( + + ) + } + }) + } + } + + // clear the state when dialog is closed + useEffect(() => { + if (!show) { + setCustomAssistantInstruction('') + setGeneratedInstruction('') + } + }, [show]) + + const component = show ? ( + <> + + + {dialogProps.title} + + + {dialogProps.description} +
+ {defaultInstructions.map((instruction, index) => { + return ( + + ) + })} +
+ {!generatedInstruction && ( + setCustomAssistantInstruction(event.target.value)} + /> + )} + {generatedInstruction && ( + setGeneratedInstruction(event.target.value)} + /> + )} + + + {!generatedInstruction && ( + { + onGenerate() + }} + startIcon={} + > + Generate + + )} + {generatedInstruction && ( + + )} + {generatedInstruction && ( + onConfirm(generatedInstruction)}> + Apply + + )} + + + + ) : null + + return createPortal(component, portalElement) +} + +AssistantPromptGenerator.propTypes = { + show: PropTypes.bool, + dialogProps: PropTypes.object, + onConfirm: PropTypes.func, + onCancel: PropTypes.func +} + +export default AssistantPromptGenerator diff --git a/packages/ui/src/ui-component/dialog/ViewLeadsDialog.jsx b/packages/ui/src/ui-component/dialog/ViewLeadsDialog.jsx index 53de3f0f543..fed7591d107 100644 --- a/packages/ui/src/ui-component/dialog/ViewLeadsDialog.jsx +++ b/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` diff --git a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx b/packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx index 1b803826b46..330ae4eed6a 100644 --- a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx +++ b/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` diff --git a/packages/ui/src/ui-component/dropdown/Dropdown.jsx b/packages/ui/src/ui-component/dropdown/Dropdown.jsx index 65b4f89e350..a29143297e7 100644 --- a/packages/ui/src/ui-component/dropdown/Dropdown.jsx +++ b/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) => ( - - )} + renderInput={(params) => { + const matchingOption = findMatchingOptions(options, internalValue) + return ( + + ) : null + }} + /> + ) + }} renderOption={(props, option) => ( - + + {option.imageSrc && ( + {option.description} + )}
{option.label} {option.description && ( diff --git a/packages/ui/src/views/agentflows/index.jsx b/packages/ui/src/views/agentflows/index.jsx index 2d9572e0437..fe7b0804594 100644 --- a/packages/ui/src/views/agentflows/index.jsx +++ b/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 ) } diff --git a/packages/ui/src/views/assistants/custom/AddCustomAssistantDialog.jsx b/packages/ui/src/views/assistants/custom/AddCustomAssistantDialog.jsx new file mode 100644 index 00000000000..8d062c55150 --- /dev/null +++ b/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) => ( + + ) + } + }) + 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) => ( + + ) + } + }) + onCancel() + } + } + + const component = show ? ( + + +
+ + {dialogProps.title} +
+ + + +
+ + Name * + + +
+
+ setCustomAssistantName(e.target.value)} + value={customAssistantName ?? ''} + /> + + + + + createCustomAssistant()}> + {dialogProps.confirmButtonName} + + + + + ) : null + + return createPortal(component, portalElement) +} + +AddCustomAssistantDialog.propTypes = { + show: PropTypes.bool, + dialogProps: PropTypes.object, + onCancel: PropTypes.func, + onConfirm: PropTypes.func +} + +export default AddCustomAssistantDialog diff --git a/packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx b/packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx new file mode 100644 index 00000000000..e782ddb47f2 --- /dev/null +++ b/packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx @@ -0,0 +1,1335 @@ +import { cloneDeep, set } from 'lodash' +import { memo, useEffect, useState, useRef } from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { useNavigate } from 'react-router-dom' +import { FullPageChat } from 'flowise-embed-react' +import PropTypes from 'prop-types' + +// Hooks +import useApi from '@/hooks/useApi' +import useConfirm from '@/hooks/useConfirm' + +// Material-UI +import { IconButton, Avatar, ButtonBase, Toolbar, Box, Button, Grid, OutlinedInput, Stack, Typography } from '@mui/material' +import { useTheme } from '@mui/material/styles' +import { IconCode, IconArrowLeft, IconDeviceFloppy, IconSettings, IconX, IconTrash, IconWand } from '@tabler/icons-react' + +// Project import +import MainCard from '@/ui-component/cards/MainCard' +import { BackdropLoader } from '@/ui-component/loading/BackdropLoader' +import DocStoreInputHandler from '@/views/docstore/DocStoreInputHandler' +import { Dropdown } from '@/ui-component/dropdown/Dropdown' +import { StyledFab } from '@/ui-component/button/StyledFab' +import ErrorBoundary from '@/ErrorBoundary' +import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser' +import { MultiDropdown } from '@/ui-component/dropdown/MultiDropdown' +import APICodeDialog from '@/views/chatflows/APICodeDialog' +import ViewMessagesDialog from '@/ui-component/dialog/ViewMessagesDialog' +import ChatflowConfigurationDialog from '@/ui-component/dialog/ChatflowConfigurationDialog' +import ViewLeadsDialog from '@/ui-component/dialog/ViewLeadsDialog' +import Settings from '@/views/settings' +import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog' +import PromptGeneratorDialog from '@/ui-component/dialog/PromptGeneratorDialog' + +// API +import assistantsApi from '@/api/assistants' +import chatflowsApi from '@/api/chatflows' +import nodesApi from '@/api/nodes' +import documentstoreApi from '@/api/documentstore' + +// Const +import { baseURL } from '@/store/constant' +import { SET_CHATFLOW, closeSnackbar as closeSnackbarAction, enqueueSnackbar as enqueueSnackbarAction } from '@/store/actions' + +// Utils +import { initNode } from '@/utils/genericHelper' +import useNotifier from '@/utils/useNotifier' +import { toolAgentFlow } from './toolAgentFlow' + +// ===========================|| CustomAssistantConfigurePreview ||=========================== // + +const MemoizedFullPageChat = memo( + ({ ...props }) => ( +
+ +
+ ), + (prevProps, nextProps) => prevProps.chatflow === nextProps.chatflow +) + +MemoizedFullPageChat.displayName = 'MemoizedFullPageChat' + +MemoizedFullPageChat.propTypes = { + chatflow: PropTypes.object +} + +const CustomAssistantConfigurePreview = () => { + const navigate = useNavigate() + const theme = useTheme() + const settingsRef = useRef() + const canvas = useSelector((state) => state.canvas) + const customization = useSelector((state) => state.customization) + + const getSpecificAssistantApi = useApi(assistantsApi.getSpecificAssistant) + const getChatModelsApi = useApi(assistantsApi.getChatModels) + const getDocStoresApi = useApi(assistantsApi.getDocStores) + const getToolsApi = useApi(assistantsApi.getTools) + const getSpecificChatflowApi = useApi(chatflowsApi.getSpecificChatflow) + + const URLpath = document.location.pathname.toString().split('/') + const customAssistantId = URLpath[URLpath.length - 1] === 'assistants' ? '' : URLpath[URLpath.length - 1] + + const [chatModelsComponents, setChatModelsComponents] = useState([]) + const [chatModelsOptions, setChatModelsOptions] = useState([]) + const [selectedChatModel, setSelectedChatModel] = useState({}) + const [selectedCustomAssistant, setSelectedCustomAssistant] = useState({}) + const [customAssistantInstruction, setCustomAssistantInstruction] = useState('You are helpful assistant') + const [customAssistantFlowId, setCustomAssistantFlowId] = useState() + const [documentStoreOptions, setDocumentStoreOptions] = useState([]) + const [selectedDocumentStores, setSelectedDocumentStores] = useState([]) + const [toolComponents, setToolComponents] = useState([]) + const [toolOptions, setToolOptions] = useState([]) + const [selectedTools, setSelectedTools] = useState([]) + + const [apiDialogOpen, setAPIDialogOpen] = useState(false) + const [apiDialogProps, setAPIDialogProps] = useState({}) + const [viewMessagesDialogOpen, setViewMessagesDialogOpen] = useState(false) + const [viewMessagesDialogProps, setViewMessagesDialogProps] = useState({}) + const [viewLeadsDialogOpen, setViewLeadsDialogOpen] = useState(false) + const [viewLeadsDialogProps, setViewLeadsDialogProps] = useState({}) + const [chatflowConfigurationDialogOpen, setChatflowConfigurationDialogOpen] = useState(false) + const [chatflowConfigurationDialogProps, setChatflowConfigurationDialogProps] = useState({}) + const [isSettingsOpen, setSettingsOpen] = useState(false) + const [assistantPromptGeneratorDialogOpen, setAssistantPromptGeneratorDialogOpen] = useState(false) + const [assistantPromptGeneratorDialogProps, setAssistantPromptGeneratorDialogProps] = useState({}) + + const [loading, setLoading] = useState(false) + const [loadingAssistant, setLoadingAssistant] = useState(true) + const [error, setError] = useState(null) + + const dispatch = useDispatch() + const { confirm } = useConfirm() + + // ==============================|| Snackbar ||============================== // + useNotifier() + const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args)) + const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args)) + + const displayWarning = () => { + enqueueSnackbar({ + message: 'Please fill in all mandatory fields.', + options: { + key: new Date().getTime() + Math.random(), + variant: 'warning', + action: (key) => ( + + ) + } + }) + } + + const checkInputParamsMandatory = () => { + let canSubmit = true + + const inputParams = (selectedChatModel.inputParams ?? []).filter((inputParam) => !inputParam.hidden) + for (const inputParam of inputParams) { + if (!inputParam.optional && (!selectedChatModel.inputs[inputParam.name] || !selectedChatModel.credential)) { + if (inputParam.type === 'credential' && !selectedChatModel.credential) { + canSubmit = false + break + } else if (inputParam.type !== 'credential' && !selectedChatModel.inputs[inputParam.name]) { + canSubmit = false + break + } + } + } + + if (selectedTools.length > 0) { + for (let i = 0; i < selectedTools.length; i++) { + const tool = selectedTools[i] + const inputParams = (tool.inputParams ?? []).filter((inputParam) => !inputParam.hidden) + for (const inputParam of inputParams) { + if (!inputParam.optional && (!tool.inputs[inputParam.name] || !tool.credential)) { + if (inputParam.type === 'credential' && !tool.credential) { + canSubmit = false + break + } else if (inputParam.type !== 'credential' && !tool.inputs[inputParam.name]) { + canSubmit = false + break + } + } + } + } + } + + return canSubmit + } + + const checkMandatoryFields = () => { + let canSubmit = true + + if (!selectedChatModel || !selectedChatModel.name) { + canSubmit = false + } + + canSubmit = checkInputParamsMandatory() + + // check if any of the description is empty + if (selectedDocumentStores.length > 0) { + for (let i = 0; i < selectedDocumentStores.length; i++) { + if (!selectedDocumentStores[i].description) { + canSubmit = false + break + } + } + } + + if (!canSubmit) { + displayWarning() + } + return canSubmit + } + + const onSaveAndProcess = async () => { + if (checkMandatoryFields()) { + setLoading(true) + const flowData = await prepareConfig() + if (!flowData) return + const saveObj = { + id: customAssistantId, + name: selectedCustomAssistant.name, + flowData: JSON.stringify(flowData), + type: 'ASSISTANT' + } + try { + let saveResp + if (!customAssistantFlowId) { + saveResp = await chatflowsApi.createNewChatflow(saveObj) + } else { + saveResp = await chatflowsApi.updateChatflow(customAssistantFlowId, saveObj) + } + + if (saveResp.data) { + setCustomAssistantFlowId(saveResp.data.id) + dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data }) + + const assistantDetails = { + ...selectedCustomAssistant, + chatModel: selectedChatModel, + instruction: customAssistantInstruction, + flowId: saveResp.data.id, + documentStores: selectedDocumentStores, + tools: selectedTools + } + + const saveAssistantResp = await assistantsApi.updateAssistant(customAssistantId, { + details: JSON.stringify(assistantDetails) + }) + + if (saveAssistantResp.data) { + setLoading(false) + enqueueSnackbar({ + message: 'Assistant saved successfully', + options: { + key: new Date().getTime() + Math.random(), + variant: 'success', + action: (key) => ( + + ) + } + }) + } + } + } catch (error) { + setLoading(false) + enqueueSnackbar({ + message: `Failed to save assistant: ${ + typeof error.response.data === 'object' ? error.response.data.message : error.response.data + }`, + options: { + key: new Date().getTime() + Math.random(), + variant: 'error', + action: (key) => ( + + ) + } + }) + } + } + } + + const addTools = async (toolAgentId) => { + const nodes = [] + const edges = [] + + for (let i = 0; i < selectedTools.length; i++) { + try { + const tool = selectedTools[i] + const toolId = `${tool.name}_${i}` + const toolNodeData = cloneDeep(tool) + set(toolNodeData, 'inputs', tool.inputs) + + const toolNodeObj = { + id: toolId, + data: { + ...toolNodeData, + id: toolId + } + } + nodes.push(toolNodeObj) + + const toolEdge = { + source: toolId, + sourceHandle: `${toolId}-output-${tool.name}-Tool`, + target: toolAgentId, + targetHandle: `${toolAgentId}-input-tools-Tool`, + type: 'buttonedge', + id: `${toolId}-${toolId}-output-${tool.name}-Tool-${toolAgentId}-${toolAgentId}-input-tools-Tool` + } + edges.push(toolEdge) + } catch (error) { + console.error('Error adding tool', error) + } + } + + return { nodes, edges } + } + + const addDocStore = async (toolAgentId) => { + const docStoreVSNode = await nodesApi.getSpecificNode('documentStoreVS') + const retrieverToolNode = await nodesApi.getSpecificNode('retrieverTool') + + const nodes = [] + const edges = [] + + for (let i = 0; i < selectedDocumentStores.length; i++) { + try { + const docStoreVSId = `documentStoreVS_${i}` + const retrieverToolId = `retrieverTool_${i}` + + const docStoreVSNodeData = cloneDeep(initNode(docStoreVSNode.data, docStoreVSId)) + const retrieverToolNodeData = cloneDeep(initNode(retrieverToolNode.data, retrieverToolId)) + + set(docStoreVSNodeData, 'inputs.selectedStore', selectedDocumentStores[i].id) + + const docStoreOption = documentStoreOptions.find((ds) => ds.name === selectedDocumentStores[i].id) + // convert to small case and replace space with underscore + const name = (docStoreOption?.label || '').toLowerCase().replace(/ /g, '_') + const desc = docStoreOption?.description || '' + + set(retrieverToolNodeData, 'inputs', { + name, + description: desc, + retriever: `{{${docStoreVSId}.data.instance}}`, + returnSourceDocuments: true + }) + + const docStoreVS = { + id: docStoreVSId, + data: { + ...docStoreVSNodeData, + id: docStoreVSId + } + } + nodes.push(docStoreVS) + + const retrieverTool = { + id: retrieverToolId, + data: { + ...retrieverToolNodeData, + id: retrieverToolId + } + } + nodes.push(retrieverTool) + + const docStoreVSEdge = { + source: docStoreVSId, + sourceHandle: `${docStoreVSId}-output-retriever-BaseRetriever`, + target: retrieverToolId, + targetHandle: `${retrieverToolId}-input-retriever-BaseRetriever`, + type: 'buttonedge', + id: `${docStoreVSId}-${docStoreVSId}-output-retriever-BaseRetriever-${retrieverToolId}-${retrieverToolId}-input-retriever-BaseRetriever` + } + edges.push(docStoreVSEdge) + + const retrieverToolEdge = { + source: retrieverToolId, + sourceHandle: `${retrieverToolId}-output-retrieverTool-RetrieverTool|DynamicTool|Tool|StructuredTool|Runnable`, + target: toolAgentId, + targetHandle: `${toolAgentId}-input-tools-Tool`, + type: 'buttonedge', + id: `${retrieverToolId}-${retrieverToolId}-output-retrieverTool-RetrieverTool|DynamicTool|Tool|StructuredTool|Runnable-${toolAgentId}-${toolAgentId}-input-tools-Tool` + } + edges.push(retrieverToolEdge) + } catch (error) { + console.error('Error adding doc store', error) + } + } + + return { nodes, edges } + } + + const prepareConfig = async () => { + try { + const config = {} + + const nodes = toolAgentFlow.nodes + const edges = toolAgentFlow.edges + const chatModelId = `${selectedChatModel.name}_0` + const existingChatModelId = nodes.find((node) => node.data.category === 'Chat Models')?.id + + // Replace Chat Model + let filteredNodes = nodes.filter((node) => node.data.category !== 'Chat Models') + const toBeReplaceNode = { + id: chatModelId, + data: { + ...selectedChatModel, + id: chatModelId + } + } + filteredNodes.push(toBeReplaceNode) + + // Replace Tool Agent inputs + const toolAgentNode = filteredNodes.find((node) => node.data.name === 'toolAgent') + const toolAgentId = toolAgentNode.id + set(toolAgentNode.data.inputs, 'model', `{{${chatModelId}}}`) + set(toolAgentNode.data.inputs, 'systemMessage', `${customAssistantInstruction}`) + + const agentTools = [] + if (selectedDocumentStores.length > 0) { + const retrieverTools = selectedDocumentStores.map((_, index) => `{{retrieverTool_${index}}}`) + agentTools.push(...retrieverTools) + } + if (selectedTools.length > 0) { + const tools = selectedTools.map((_, index) => `{{${selectedTools[index].id}}}`) + agentTools.push(...tools) + } + set(toolAgentNode.data.inputs, 'tools', agentTools) + + filteredNodes = filteredNodes.map((node) => (node.id === toolAgentNode.id ? toolAgentNode : node)) + + // Go through each edge and loop through each key. Check if the string value of each key includes/contains existingChatModelId, if yes replace with chatModelId + let filteredEdges = edges.map((edge) => { + const newEdge = { ...edge } + Object.keys(newEdge).forEach((key) => { + if (newEdge[key].includes(existingChatModelId)) { + newEdge[key] = newEdge[key].replaceAll(existingChatModelId, chatModelId) + } + }) + return newEdge + }) + + // Add Doc Store + if (selectedDocumentStores.length > 0) { + const { nodes: newNodes, edges: newEdges } = await addDocStore(toolAgentId) + filteredNodes = [...filteredNodes, ...newNodes] + filteredEdges = [...filteredEdges, ...newEdges] + } + + // Add Tools + if (selectedTools.length > 0) { + const { nodes: newNodes, edges: newEdges } = await addTools(toolAgentId) + filteredNodes = [...filteredNodes, ...newNodes] + filteredEdges = [...filteredEdges, ...newEdges] + } + + config.nodes = filteredNodes + config.edges = filteredEdges + + return config + } catch (error) { + console.error('Error preparing config', error) + enqueueSnackbar({ + message: `Failed to save assistant: ${ + typeof error.response.data === 'object' ? error.response.data.message : error.response.data + }`, + options: { + key: new Date().getTime() + Math.random(), + variant: 'error', + action: (key) => ( + + ) + } + }) + return undefined + } + } + + const onSettingsItemClick = (setting) => { + setSettingsOpen(false) + + if (setting === 'deleteAssistant') { + handleDeleteFlow() + } else if (setting === 'viewMessages') { + setViewMessagesDialogProps({ + title: 'View Messages', + chatflow: canvas.chatflow + }) + setViewMessagesDialogOpen(true) + } else if (setting === 'viewLeads') { + setViewLeadsDialogProps({ + title: 'View Leads', + chatflow: canvas.chatflow + }) + setViewLeadsDialogOpen(true) + } else if (setting === 'chatflowConfiguration') { + setChatflowConfigurationDialogProps({ + title: `Assistant Configuration`, + chatflow: canvas.chatflow + }) + setChatflowConfigurationDialogOpen(true) + } + } + + const handleDeleteFlow = async () => { + const confirmPayload = { + title: `Delete`, + description: `Delete ${selectedCustomAssistant.name}?`, + confirmButtonName: 'Delete', + cancelButtonName: 'Cancel' + } + const isConfirmed = await confirm(confirmPayload) + + if (isConfirmed && customAssistantId) { + try { + const resp = await assistantsApi.deleteAssistant(customAssistantId) + if (resp.data && customAssistantFlowId) { + await chatflowsApi.deleteChatflow(customAssistantFlowId) + } + navigate(-1) + } catch (error) { + 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) => ( + + ) + } + }) + } + } + } + + const generateDocStoreToolDesc = async (storeId) => { + const isValid = checkInputParamsMandatory() + if (!isValid) { + displayWarning() + return + } + + try { + setLoading(true) + const selectedChatModelObj = { + name: selectedChatModel.name, + inputs: selectedChatModel.inputs + } + const resp = await documentstoreApi.generateDocStoreToolDesc(storeId, { selectedChatModel: selectedChatModelObj }) + + if (resp.data) { + setLoading(false) + const content = resp.data?.content || resp.data.kwargs?.content + // replace the description of the selected document store + const newSelectedDocumentStores = selectedDocumentStores.map((ds) => { + if (ds.id === storeId) { + return { + ...ds, + description: content + } + } + return ds + }) + setSelectedDocumentStores(newSelectedDocumentStores) + enqueueSnackbar({ + message: 'Document Store Tool Description generated successfully', + options: { + key: new Date().getTime() + Math.random(), + variant: 'success', + action: (key) => ( + + ) + } + }) + } + } catch (error) { + console.error('Error generating doc store tool desc', 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) => ( + + ) + } + }) + } + } + + const generateInstruction = async () => { + const isValid = checkInputParamsMandatory() + if (!isValid) { + displayWarning() + return + } + + setAssistantPromptGeneratorDialogProps({ + title: 'Generate Instructions', + description: 'You can generate a prompt template by sharing basic details about your task.', + data: { selectedChatModel } + }) + setAssistantPromptGeneratorDialogOpen(true) + } + + const onAPIDialogClick = () => { + setAPIDialogProps({ + title: 'Embed in website or use as API', + chatflowid: customAssistantFlowId, + chatflowApiKeyId: canvas.chatflow.apikeyid, + isSessionMemory: true + }) + setAPIDialogOpen(true) + } + + const onDocStoreItemSelected = (docStoreIds) => { + const docStoresIds = JSON.parse(docStoreIds) + const newSelectedDocumentStores = [] + for (const docStoreId of docStoresIds) { + const foundSelectedDocumentStore = selectedDocumentStores.find((ds) => ds.id === docStoreId) + const foundDocumentStoreOption = documentStoreOptions.find((ds) => ds.name === docStoreId) + + const newDocStore = { + id: docStoreId, + name: foundDocumentStoreOption?.label || '', + description: foundSelectedDocumentStore?.description || foundDocumentStoreOption?.description || '' + } + + newSelectedDocumentStores.push(newDocStore) + } + setSelectedDocumentStores(newSelectedDocumentStores) + } + + const onDocStoreItemDelete = (docStoreId) => { + const newSelectedDocumentStores = selectedDocumentStores.filter((ds) => ds.id !== docStoreId) + setSelectedDocumentStores(newSelectedDocumentStores) + } + + useEffect(() => { + getChatModelsApi.request() + getDocStoresApi.request() + getToolsApi.request() + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + useEffect(() => { + if (getDocStoresApi.data) { + // Set options + const options = getDocStoresApi.data.map((ds) => ({ + label: ds.label, + name: ds.name, + description: ds.description + })) + setDocumentStoreOptions(options) + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getDocStoresApi.data]) + + useEffect(() => { + if (getToolsApi.data) { + setToolComponents(getToolsApi.data) + + // Set options + const options = getToolsApi.data.map((ds) => ({ + label: ds.label, + name: ds.name, + description: ds.description + })) + setToolOptions(options) + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getToolsApi.data]) + + useEffect(() => { + if (getChatModelsApi.data) { + setChatModelsComponents(getChatModelsApi.data) + + // Set options + const options = getChatModelsApi.data.map((chatModel) => ({ + label: chatModel.label, + name: chatModel.name, + imageSrc: `${baseURL}/api/v1/node-icon/${chatModel.name}` + })) + setChatModelsOptions(options) + + if (customAssistantId) { + setLoadingAssistant(true) + getSpecificAssistantApi.request(customAssistantId) + } + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getChatModelsApi.data]) + + useEffect(() => { + if (getSpecificAssistantApi.data) { + setLoadingAssistant(false) + try { + const assistantDetails = JSON.parse(getSpecificAssistantApi.data.details) + setSelectedCustomAssistant(assistantDetails) + + if (assistantDetails.chatModel) { + setSelectedChatModel(assistantDetails.chatModel) + } + + if (assistantDetails.instruction) { + setCustomAssistantInstruction(assistantDetails.instruction) + } + + if (assistantDetails.flowId) { + setCustomAssistantFlowId(assistantDetails.flowId) + getSpecificChatflowApi.request(assistantDetails.flowId) + } + + if (assistantDetails.documentStores) { + setSelectedDocumentStores(assistantDetails.documentStores) + } + + if (assistantDetails.tools) { + setSelectedTools(assistantDetails.tools) + } + } catch (error) { + console.error('Error parsing assistant details', error) + } + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getSpecificAssistantApi.data]) + + useEffect(() => { + if (getSpecificChatflowApi.data) { + const chatflow = getSpecificChatflowApi.data + dispatch({ type: SET_CHATFLOW, chatflow }) + } else if (getSpecificChatflowApi.error) { + setError(`Failed to retrieve: ${getSpecificChatflowApi.error.response.data.message}`) + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getSpecificChatflowApi.data, getSpecificChatflowApi.error]) + + useEffect(() => { + if (getSpecificAssistantApi.error) { + setLoadingAssistant(false) + setError(getSpecificAssistantApi.error) + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getSpecificAssistantApi.error]) + + useEffect(() => { + if (getChatModelsApi.error) { + setError(getChatModelsApi.error) + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getChatModelsApi.error]) + + useEffect(() => { + if (getDocStoresApi.error) { + setError(getDocStoresApi.error) + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getDocStoresApi.error]) + + const defaultWidth = () => { + if (customAssistantFlowId && !loadingAssistant) { + return 6 + } + return 12 + } + + const pageHeight = () => { + return window.innerHeight - 130 + } + + return ( + <> + + {error ? ( + + ) : ( + + + + +
+ + + + navigate(-1)} + > + + + + {selectedCustomAssistant?.name ?? ''} + + +
+ {customAssistantFlowId && !loadingAssistant && ( + + + + + + )} + + + + + + {customAssistantFlowId && !loadingAssistant && ( + + setSettingsOpen(!isSettingsOpen)} + > + + + + )} + {!customAssistantFlowId && !loadingAssistant && ( + + + + + + )} + + + +
+ + Select Model * + +
+ { + if (!newValue) { + setSelectedChatModel({}) + } else { + const foundChatComponent = chatModelsComponents.find( + (chatModel) => chatModel.name === newValue + ) + if (foundChatComponent) { + const chatModelId = `${foundChatComponent.name}_0` + const clonedComponent = cloneDeep(foundChatComponent) + const initChatModelData = initNode(clonedComponent, chatModelId) + setSelectedChatModel(initChatModelData) + } + } + }} + value={selectedChatModel ? selectedChatModel?.name : 'choose an option'} + /> + + + + + Instructions * + +
+ {selectedChatModel?.name && ( + + )} + + setCustomAssistantInstruction(event.target.value)} + /> + + + + Knowledge (Document Stores) + + + { + if (!newValue) { + setSelectedDocumentStores([]) + } else { + onDocStoreItemSelected(newValue) + } + }} + value={selectedDocumentStores.map((ds) => ds.id) ?? 'choose an option'} + /> + {selectedDocumentStores.length > 0 && ( + + + Describe Knowledge * + + + + )} + {selectedDocumentStores.map((ds, index) => { + return ( + + +
+ {ds.name} + onDocStoreItemDelete(ds.id)} + > + + +
+
+ {selectedChatModel?.name && ( + + )} + + { + const newSelectedDocumentStores = [...selectedDocumentStores] + newSelectedDocumentStores[index].description = event.target.value + setSelectedDocumentStores(newSelectedDocumentStores) + }} + /> + + ) + })} + + {selectedChatModel && Object.keys(selectedChatModel).length > 0 && ( + + {(selectedChatModel.inputParams ?? []) + .filter((inputParam) => !inputParam.hidden) + .map((inputParam, index) => ( + + ))} + + )} + + + Tools + + + {selectedTools.map((tool, index) => { + return ( + + +
+ + Tool * + +
+ { + const newSelectedTools = selectedTools.filter((t, i) => i !== index) + setSelectedTools(newSelectedTools) + }} + > + + +
+ { + if (!newValue) { + const newSelectedTools = [...selectedTools] + newSelectedTools[index] = {} + setSelectedTools(newSelectedTools) + } else { + const foundToolComponent = toolComponents.find( + (tool) => tool.name === newValue + ) + if (foundToolComponent) { + const toolId = `${foundToolComponent.name}_${index}` + const clonedComponent = cloneDeep(foundToolComponent) + const initToolData = initNode(clonedComponent, toolId) + const newSelectedTools = [...selectedTools] + newSelectedTools[index] = initToolData + setSelectedTools(newSelectedTools) + } + } + }} + value={tool?.name || 'choose an option'} + /> + + {tool && Object.keys(tool).length === 0 && ( + + )} + {tool && Object.keys(tool).length > 0 && ( + + {(tool.inputParams ?? []) + .filter((inputParam) => !inputParam.hidden) + .map((inputParam, index) => ( + + ))} + + )} + + ) + })} + + + {selectedChatModel && Object.keys(selectedChatModel).length > 0 && ( + + )} +
+ + {customAssistantFlowId && !loadingAssistant && ( + + + {customization.isDarkMode && ( + + )} + {!customization.isDarkMode && ( + + )} + + + )} + + + + )} + + {loading && } + {apiDialogOpen && setAPIDialogOpen(false)} />} + {isSettingsOpen && ( + setSettingsOpen(false)} + onSettingsItemClick={onSettingsItemClick} + isCustomAssistant={true} + /> + )} + setViewMessagesDialogOpen(false)} + /> + setViewLeadsDialogOpen(false)} /> + setChatflowConfigurationDialogOpen(false)} + /> + setAssistantPromptGeneratorDialogOpen(false)} + onConfirm={(generatedInstruction) => { + setCustomAssistantInstruction(generatedInstruction) + setAssistantPromptGeneratorDialogOpen(false) + }} + /> + + + ) +} + +export default CustomAssistantConfigurePreview diff --git a/packages/ui/src/views/assistants/custom/CustomAssistantLayout.jsx b/packages/ui/src/views/assistants/custom/CustomAssistantLayout.jsx new file mode 100644 index 00000000000..5300d572681 --- /dev/null +++ b/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 ( + <> + + {error ? ( + + ) : ( + + navigate(-1)} + > + } + > + Add + + + {isLoading ? ( + + + + + + ) : ( + + {getAllAssistantsApi.data && + getAllAssistantsApi.data?.filter(filterAssistants).map((data, index) => ( + navigate('/assistants/custom/' + data.id)} + /> + ))} + + )} + {!isLoading && (!getAllAssistantsApi.data || getAllAssistantsApi.data.length === 0) && ( + + + AssistantEmptySVG + +
No Custom Assistants Added Yet
+ + )} + + )} + + setShowDialog(false)} + onConfirm={onConfirm} + setError={setError} + > + + ) +} + +export default CustomAssistantLayout diff --git a/packages/ui/src/views/assistants/custom/toolAgentFlow.js b/packages/ui/src/views/assistants/custom/toolAgentFlow.js new file mode 100644 index 00000000000..49674781a89 --- /dev/null +++ b/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 more', + 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 docs 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' + } + ] +} diff --git a/packages/ui/src/views/assistants/index.jsx b/packages/ui/src/views/assistants/index.jsx index 06694696965..a6c43f0a89b 100644 --- a/packages/ui/src/views/assistants/index.jsx +++ b/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' - -// icons -import { IconPlus, IconFileUpload } from '@tabler/icons-react' import ViewHeader from '@/layout/MainLayout/ViewHeader' -import ErrorBoundary from '@/ErrorBoundary' - -// ==============================|| CHATFLOWS ||============================== // - -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) +// icons +import { IconRobotFace, IconBrandOpenai, IconBrandAzure } from '@tabler/icons-react' + +const cards = [ + { + title: 'Custom Assistant', + description: 'Create custom assistant using your choice of LLMs', + icon: , + iconText: 'Custom', + gradient: 'linear-gradient(135deg, #fff8e14e 0%, #ffcc802f 100%)' + }, + { + title: 'OpenAI Assistant', + description: 'Create assistant using OpenAI Assistant API', + icon: , + iconText: 'OpenAI', + gradient: 'linear-gradient(135deg, #c9ffd85f 0%, #a0f0b567 100%)' + }, + { + title: 'Azure Assistant (Coming Soon)', + description: 'Create assistant using Azure Assistant API', + icon: , + iconText: 'Azure', + gradient: 'linear-gradient(135deg, #c4e1ff57 0%, #80b7ff5a 100%)' } - - const edit = (selectedAssistant) => { - const dialogProp = { - title: 'Edit Assistant', - type: 'EDIT', - cancelButtonName: 'Cancel', - confirmButtonName: 'Save', - data: selectedAssistant - } - setDialogProps(dialogProp) - setShowDialog(true) +] + +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 onConfirm = () => { - setShowDialog(false) - getAllAssistantsApi.request() - } +const FeatureCards = () => { + const navigate = useNavigate() + const theme = useTheme() + const customization = useSelector((state) => state.customization) - function filterAssistants(data) { - const parsedData = JSON.parse(data.details) - return parsedData && parsedData.name && parsedData.name.toLowerCase().indexOf(search.toLowerCase()) > -1 + const onCardClick = (index) => { + if (index === 0) navigate('/assistants/custom') + if (index === 1) navigate('/assistants/openai') + if (index === 2) alert('Under Development') } - useEffect(() => { - getAllAssistantsApi.request() - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - - useEffect(() => { - setLoading(getAllAssistantsApi.loading) - }, [getAllAssistantsApi.loading]) + return ( + + {cards.map((card, index) => ( + index !== 2 && onCardClick(index)} + > + + + {card.icon} + {card.iconText} + +

{card.title}

+

{card.description}

+ + + ))} + + ) +} - useEffect(() => { - if (getAllAssistantsApi.error) { - setError(getAllAssistantsApi.error) - } - }, [getAllAssistantsApi.error]) +// ==============================|| ASSISTANTS ||============================== // +const Assistants = () => { return ( <> - {error ? ( - - ) : ( - - - - } - > - Add - - - {isLoading ? ( - - - - - - ) : ( - - {getAllAssistantsApi.data && - getAllAssistantsApi.data?.filter(filterAssistants).map((data, index) => ( - edit(data)} - /> - ))} - - )} - {!isLoading && (!getAllAssistantsApi.data || getAllAssistantsApi.data.length === 0) && ( - - - AssistantEmptySVG - -
No Assistants Added Yet
- - )} - - )} + + + + - setShowLoadDialog(false)} - onAssistantSelected={onAssistantSelected} - setError={setError} - > - setShowDialog(false)} - onConfirm={onConfirm} - setError={setError} - > ) } diff --git a/packages/ui/src/views/assistants/AssistantDialog.jsx b/packages/ui/src/views/assistants/openai/AssistantDialog.jsx similarity index 99% rename from packages/ui/src/views/assistants/AssistantDialog.jsx rename to packages/ui/src/views/assistants/openai/AssistantDialog.jsx index bee18077573..3ef3c8703d8 100644 --- a/packages/ui/src/views/assistants/AssistantDialog.jsx +++ b/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) diff --git a/packages/ui/src/views/assistants/AssistantVectorStoreDialog.jsx b/packages/ui/src/views/assistants/openai/AssistantVectorStoreDialog.jsx similarity index 100% rename from packages/ui/src/views/assistants/AssistantVectorStoreDialog.jsx rename to packages/ui/src/views/assistants/openai/AssistantVectorStoreDialog.jsx diff --git a/packages/ui/src/views/assistants/DeleteConfirmDialog.jsx b/packages/ui/src/views/assistants/openai/DeleteConfirmDialog.jsx similarity index 100% rename from packages/ui/src/views/assistants/DeleteConfirmDialog.jsx rename to packages/ui/src/views/assistants/openai/DeleteConfirmDialog.jsx diff --git a/packages/ui/src/views/assistants/LoadAssistantDialog.jsx b/packages/ui/src/views/assistants/openai/LoadAssistantDialog.jsx similarity index 100% rename from packages/ui/src/views/assistants/LoadAssistantDialog.jsx rename to packages/ui/src/views/assistants/openai/LoadAssistantDialog.jsx diff --git a/packages/ui/src/views/assistants/openai/OpenAIAssistantLayout.jsx b/packages/ui/src/views/assistants/openai/OpenAIAssistantLayout.jsx new file mode 100644 index 00000000000..9abe195416c --- /dev/null +++ b/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 ( + <> + + {error ? ( + + ) : ( + + navigate(-1)} + > + + } + > + Add + + + {isLoading ? ( + + + + + + ) : ( + + {getAllAssistantsApi.data && + getAllAssistantsApi.data?.filter(filterAssistants).map((data, index) => ( + edit(data)} + /> + ))} + + )} + {!isLoading && (!getAllAssistantsApi.data || getAllAssistantsApi.data.length === 0) && ( + + + AssistantEmptySVG + +
No OpenAI Assistants Added Yet
+ + )} + + )} + + setShowLoadDialog(false)} + onAssistantSelected={onAssistantSelected} + setError={setError} + > + setShowDialog(false)} + onConfirm={onConfirm} + setError={setError} + > + + ) +} + +export default OpenAIAssistantLayout diff --git a/packages/ui/src/views/canvas/CanvasHeader.jsx b/packages/ui/src/views/canvas/CanvasHeader.jsx index 05a2ca58785..c89eb2829bc 100644 --- a/packages/ui/src/views/canvas/CanvasHeader.jsx +++ b/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` diff --git a/packages/ui/src/views/canvas/NodeInputHandler.jsx b/packages/ui/src/views/canvas/NodeInputHandler.jsx index 5c4b9eb67cb..cbc0dfd33ef 100644 --- a/packages/ui/src/views/canvas/NodeInputHandler.jsx +++ b/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' diff --git a/packages/ui/src/views/chatflows/index.jsx b/packages/ui/src/views/chatflows/index.jsx index 26452c9ea44..699b8d87655 100644 --- a/packages/ui/src/views/chatflows/index.jsx +++ b/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 ) } diff --git a/packages/ui/src/views/docstore/DocStoreInputHandler.jsx b/packages/ui/src/views/docstore/DocStoreInputHandler.jsx index cb4e75b1791..97c307ff645 100644 --- a/packages/ui/src/views/docstore/DocStoreInputHandler.jsx +++ b/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 (
{inputParam && ( @@ -120,7 +128,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => { { data.credential = newValue diff --git a/packages/ui/src/views/settings/index.jsx b/packages/ui/src/views/settings/index.jsx index 10900b623c0..4ef37c74ad7 100644 --- a/packages/ui/src/views/settings/index.jsx +++ b/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, diff --git a/packages/ui/src/views/tools/ToolDialog.jsx b/packages/ui/src/views/tools/ToolDialog.jsx index 132980d7ede..8be2a325638 100644 --- a/packages/ui/src/views/tools/ToolDialog.jsx +++ b/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`