From 7b7e5c5409470ae891fff939a87a84e546c5ed56 Mon Sep 17 00:00:00 2001 From: kielbasa-elp Date: Tue, 20 Feb 2024 11:49:43 +0100 Subject: [PATCH] Add HTTP api page --- .../CodePreview/CodePreviewWrapper.tsx | 5 +- .../interface/httpApi/index.server.tsx | 1 + .../pipelines/interface/httpApi/index.tsx | 1 + .../interface/httpApi/loader.server.tsx | 17 ++ .../pipelines/interface/httpApi/page.tsx | 158 ++++++++++++++++++ .../pages/pipelines/interface/httpApi/test.sh | 52 ++++++ .../interface/interfaceLayout/page.tsx | 17 +- ...elines_.$pipelineId.interface.http-api.tsx | 5 + apps/web-remix/app/utils/routes.utils.ts | 9 + 9 files changed, 260 insertions(+), 5 deletions(-) create mode 100644 apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.server.tsx create mode 100644 apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.tsx create mode 100644 apps/web-remix/app/components/pages/pipelines/interface/httpApi/loader.server.tsx create mode 100644 apps/web-remix/app/components/pages/pipelines/interface/httpApi/page.tsx create mode 100644 apps/web-remix/app/components/pages/pipelines/interface/httpApi/test.sh create mode 100644 apps/web-remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.interface.http-api.tsx diff --git a/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx b/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx index 1d16773b4..cc68817e7 100644 --- a/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx +++ b/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx @@ -7,6 +7,7 @@ interface CodePreviewWrapperProps extends CodePreviewProps { export const CodePreviewWrapper: React.FC = ({ children, + height, ...props }) => { return ( @@ -15,8 +16,8 @@ export const CodePreviewWrapper: React.FC = ({ {children?.(props.value)} - - {() => } + }> + {() => } ); diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.server.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.server.tsx new file mode 100644 index 000000000..20e7c57d0 --- /dev/null +++ b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.server.tsx @@ -0,0 +1 @@ +export { loader } from "./loader.server"; diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.tsx new file mode 100644 index 000000000..6a16b6414 --- /dev/null +++ b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.tsx @@ -0,0 +1 @@ +export { HTTPApiPage as page, meta } from "./page"; diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/loader.server.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/loader.server.tsx new file mode 100644 index 000000000..784ccedcd --- /dev/null +++ b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/loader.server.tsx @@ -0,0 +1,17 @@ +import { json, LoaderFunctionArgs } from "@remix-run/node"; +import { loaderBuilder } from "~/utils.server"; +import { requireLogin } from "~/session.server"; +import invariant from "tiny-invariant"; + +export async function loader(args: LoaderFunctionArgs) { + return loaderBuilder(async ({ request, params }) => { + await requireLogin(request); + invariant(params.organizationId, "organizationId not found"); + invariant(params.pipelineId, "pipelineId not found"); + + return json({ + pipelineId: params.pipelineId, + organizationId: params.organizationId, + }); + })(args); +} diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/page.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/page.tsx new file mode 100644 index 000000000..a60f05291 --- /dev/null +++ b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/page.tsx @@ -0,0 +1,158 @@ +import React from "react"; +import { routes } from "~/utils/routes.utils"; +import { MetaFunction } from "@remix-run/node"; +import { Link, useLoaderData } from "@remix-run/react"; +import { CopyCodeButton } from "~/components/actionButtons/CopyCodeButton"; +import { CodePreviewWrapper } from "~/components/pages/pipelines/CodePreview/CodePreviewWrapper"; +import { CodePreviewOptions } from "~/components/pages/pipelines/CodePreview/CodePreviewOptions"; +import { + PreviewConnector, + PreviewSection, + PreviewSectionContent, + PreviewSectionHeader, + PreviewSectionHeading, + PreviewSectionStep, + PreviewSectionText, +} from "../PreviewSection"; +import { loader } from "./loader.server"; + +export function HTTPApiPage() { + const { organizationId, pipelineId } = useLoaderData(); + return ( +
+

HTTP Api

+

+ Access our Buildel API easily with our client SDK. +

+ + + + + 1 + + + Install Buildel packages + + + + + + Begin by installing the necessary Buildel packages using npm. This + initial step equips you with the tools required for seamless + integration with our API. + + + + {(value) => } + + + + + + + + 1 + + + Install Buildel packages + + + + + + Begin by installing the necessary Buildel packages using npm. This + initial step equips you with the tools required for seamless + integration with our API. + + + + {(value) => } + + + + + + + + 1 + + + Install Buildel packages + + + + + + Begin by installing the necessary Buildel packages using npm. This + initial step equips you with the tools required for seamless + integration with our API. + + + + {(value) => } + + + + + + + + 1 + + + Install Buildel packages + + + + + + Begin by installing the necessary Buildel packages using npm. This + initial step equips you with the tools required for seamless + integration with our API. + + + + {(value) => } + + + +
+ ); +} +export const meta: MetaFunction = () => { + return [ + { + title: "Client SDK", + }, + ]; +}; diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/test.sh b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/test.sh new file mode 100644 index 000000000..2011c1c6f --- /dev/null +++ b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/test.sh @@ -0,0 +1,52 @@ +curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer SECRET" \ + -d '{"metadata": {"userId": 123}}' + + +curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs/1/start \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer SECRET" + +curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs/1/input \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer SECRET" \ + -d '{"block_name": "text_input_1", "input_name": "input", "data": "Content"}' + +curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs/1/stop \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer SECRET" + + + + + + + +curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI=" \ + -d '{"metadata": {"userId": 123}}' + + +curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs/4501/start \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI=" + +curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs/4501/input \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI=" \ + -d '{"block_name": "Input", "input_name": "input", "data": "Hello"}' + + +curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs/4501/stop \ + -X POST \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI=" diff --git a/apps/web-remix/app/components/pages/pipelines/interface/interfaceLayout/page.tsx b/apps/web-remix/app/components/pages/pipelines/interface/interfaceLayout/page.tsx index 12472b9bf..c0f051e75 100644 --- a/apps/web-remix/app/components/pages/pipelines/interface/interfaceLayout/page.tsx +++ b/apps/web-remix/app/components/pages/pipelines/interface/interfaceLayout/page.tsx @@ -19,16 +19,27 @@ export function InterfaceLayout() { to={routes.pipelineClientSDK( organizationId, pipelineId, - Object.fromEntries(searchParams.entries()), + Object.fromEntries(searchParams.entries()) )} > Client SDK + + + HTTP Api + + Website Chatbot @@ -38,7 +49,7 @@ export function InterfaceLayout() { to={routes.pipelineOpenAIApi( organizationId, pipelineId, - Object.fromEntries(searchParams.entries()), + Object.fromEntries(searchParams.entries()) )} > OpenAI Api diff --git a/apps/web-remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.interface.http-api.tsx b/apps/web-remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.interface.http-api.tsx new file mode 100644 index 000000000..7ca9d73f3 --- /dev/null +++ b/apps/web-remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.interface.http-api.tsx @@ -0,0 +1,5 @@ +export { + page as default, + meta, +} from "~/components/pages/pipelines/interface/httpApi"; +export { loader } from "~/components/pages/pipelines/interface/httpApi/index.server"; diff --git a/apps/web-remix/app/utils/routes.utils.ts b/apps/web-remix/app/utils/routes.utils.ts index 504c8ae86..54c29e51d 100644 --- a/apps/web-remix/app/utils/routes.utils.ts +++ b/apps/web-remix/app/utils/routes.utils.ts @@ -112,6 +112,15 @@ export const routes = { `${routes.pipelineInterface(organizationId, pipelineId)}/openai-api`, params ), + pipelineHTTPApi: ( + organizationId: OrganizationId, + pipelineId: PipelineId, + params: RouteParam = {} + ) => + buildUrlWithParams( + `${routes.pipelineInterface(organizationId, pipelineId)}/http-api`, + params + ), pipelineSettings: ( organizationId: OrganizationId, pipelineId: PipelineId,