Enable chatbot flow management

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

src/app/api/message-providers/[id]/chatbot-flow/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from "next/server";
+import { ApiErrorHandler } from "@/common/error/api-error-handler";
+import { UserSessionManager } from "@/domains/auth/services/user-session-maganer";
+import { PrismaClientFactory } from "@/common/database/prisma-factory";
+import { GetProviderChatbotFlow } from "@/domains/message-providers/use-cases/get-provider-chatbot-flow";
+import { UpdateProviderChatbotFlow, updateProviderChatbotFlowInputSchema } from "@/domains/message-providers/use-cases/update-provider-chatbot-flow";
+
+
+export async function GET(request: NextRequest, { params }: { params: RequestParams }) {
+
+  try {
+    const useCase = new GetProviderChatbotFlow({
+      userLogged: await new UserSessionManager().getUserOrThrow(),
+      prismaClient: PrismaClientFactory.create()
+    });
+
+    const result = await useCase.execute({
+      providerId: parseInt(params.id)
+    });
+
+    return NextResponse.json(result);
+  }
+  catch(error) {
+    return ApiErrorHandler.handler(error);
+  }
+}
+
+
+export async function PUT(request: NextRequest, { params }: { params: RequestParams }) {
+
+  try {
+    const input = updateProviderChatbotFlowInputSchema.parse(await request.json());
+
+    const useCase = new UpdateProviderChatbotFlow({
+      userLogged: await new UserSessionManager().getUserOrThrow(),
+      prismaClient: PrismaClientFactory.create()
+    });
+
+    await useCase.execute({
+      providerId: parseInt(params.id),
+      chatbotFlow: input.chatbotFlow
+    });
+
+    return new NextResponse(null, { status: 204 });
+  }
+  catch(error) {
+    return ApiErrorHandler.handler(error);
+  }
+}
+
+interface RequestParams {
+  id: string;
+}

src/app/chatbot/flow/page.tsx

@@ -0,0 +1,26 @@
+import { AppLayout } from '@/components/AppLayout';
+import { AppLayoutBody } from '@/components/AppLayout/Body';
+import { AppLayoutHeader } from '@/components/AppLayout/Header';
+import { AppLayoutMenuWithTitle } from '@/components/AppLayout/MenuWithTitle';
+import { AppNavMenuDefault, AppNavMenuItens } from '@/components/AppLayout/NavMenu';
+import { AppLayoutPreLoading } from '@/components/AppLayout/PreLoading';
+import { ModalContainer } from '@/components/Modal/Container';
+import { ChatbotFlowView } from '@/components/ChatbotFlowView';
+
+export default function Settings() {
+
+  return (
+    <AppLayout>
+      <AppLayoutHeader>
+        <AppLayoutMenuWithTitle title="Chatbot" />
+      </AppLayoutHeader>
+      <AppLayoutBody>
+        <AppLayoutPreLoading>
+          <ChatbotFlowView />
+        </AppLayoutPreLoading>
+      </AppLayoutBody>
+      <AppNavMenuDefault active={AppNavMenuItens.more} />
+      <ModalContainer />
+    </AppLayout>
+  );
+}

src/common/routes/index.tsx

@@ -19,4 +19,5 @@ export abstract class AppRoutes {
   public static viewGroup(groupId: string) { return '/groups/' + groupId; }
   public static groups() { return '/groups'; }
   public static newGroup() { return '/groups/new'; }
+  public static chatbotFlow() { return '/chatbot/flow'; }
 }

src/common/services/messaging/models.ts

@@ -38,4 +38,27 @@ export interface ProviderWithStatus {
   status: ProviderStatus;
   message?: string;
   qrCodeContent?: string;
+}
+
+export interface ChatNode {
+  id: string;
+  label: string;
+  pattern: string;
+  output: ChatNodeOutput[];
+  invalidOutput?: ChatNodeOutput[];
+  childs: ChatNode[];
+  delayChildren?: number; // Delay antes de selecionar o próximo estado. CasoUso: O bot pede para o cliente digitar algo. Só que o cliente enviar em varias mensagens. Para exibir que o bot responda na primeira mensagem esperar algum tempo
+  action?: {
+      type: ChatNodeAction;
+  };
+  delay?: number; // seconds
+}
+
+export interface ChatNodeOutput {
+  type: 'text' | 'media-link';
+  content: string;
+}
+
+export enum ChatNodeAction {
+  GoToPrevious = 1
 }

src/common/services/messaging/providers-api.ts

@@ -1,7 +1,7 @@
 import { AppConfig } from "../../configuration";
 import { HttpClient } from "../../http/client";
 import { UrlFormatter } from "../../http/url/url-formatter";
-import { IProviderConfig, Provider, ProviderType, ProviderWithStatus } from "./models";
+import { ChatNode, IProviderConfig, Provider, ProviderType, ProviderWithStatus } from "./models";
 
 
 export class ProvidersApi {
@@ -53,6 +53,18 @@ export class ProvidersApi {
     const url = UrlFormatter.format('{id}/finalize', { id: args.id });
     return await this._client.post<Provider[]>(url, undefined);
   }
+
+  public async getChatbotFlow(args: GetChatbotFlowArgs) {
+
+    const url = UrlFormatter.format('{id}/chatbot-flow', { id: args.id });
+    return await this._client.get<ChatNode>(url) ?? null;
+  }
+
+  public async updateChatbotFlow({ id, ...args }: UpdateChatbotFlowArgs) {
+
+    const url = UrlFormatter.format('{id}/chatbot-flow', { id: id });
+    return await this._client.put<ChatNode>(url, args) ?? null;
+  }
 }
 
 export interface ProviderCreateArgs {
@@ -79,4 +91,13 @@ export interface FinalizeArgs {
 
 export interface GetStatusArgs {
   id?: number;
-}
+}
+
+export interface GetChatbotFlowArgs {
+  id: number;
+}
+
+export interface UpdateChatbotFlowArgs {
+  id: number;
+  chatbotFlow: ChatNode;
+}

src/components/AppLayout/NavMenu/MoreItem/index.tsx

@@ -22,6 +22,9 @@ export function MoreItem() {
           {user && <span className="flex items-center text-lg v text-green-600"><UserCircleIcon className="h-7 w-7 inline-block mr-2" /> {user.name}</span>}
       </ModalHeader>
       <div>
+        <Button onClick={handleHide} variant="textOnly" className="text-left w-full border-b py-4">
+          <Link href={AppRoutes.chatbotFlow()} className="block"><ChatBubbleOvalLeftEllipsisIcon className="h-5 w-5 inline-block" /> Chatbot</Link>
+        </Button>
         <Button onClick={handleHide} variant="textOnly" className="text-left w-full border-b py-4">
           <Link href={AppRoutes.groups()} className="block"><UserGroupIcon className="h-5 w-5 inline-block" /> Grupos</Link>
         </Button>