TMP

front/components/sparkle/navigation.tsx

@@ -8,6 +8,7 @@ import {
   FolderOpenIcon,
   KeyIcon,
   PaperAirplaneIcon,
+  RobotStrokeIcon,
   Square3Stack3DIcon,
   TestTubeIcon,
 } from "@dust-tt/sparkle";
@@ -23,7 +24,11 @@ import { WorkspaceType } from "@app/types/user";
  */
 export type TopNavigationId = "assistant" | "lab" | "settings";
 
-export type SubNavigationAdminId = "data_sources" | "workspace" | "developers";
+export type SubNavigationAdminId =
+  | "data_sources"
+  | "workspace"
+  | "developers"
+  | "assistants";
 export type SubNavigationDataSourceId = "documents" | "search" | "settings";
 export type SubNavigationAppId =
   | "specification"
@@ -139,6 +144,15 @@ export const subNavigationAdmin = ({
       subMenuLabel: current === "developers" ? subMenuLabel : undefined,
       subMenu: current === "developers" ? subMenu : undefined,
     });
+    nav.push({
+      id: "assistants",
+      label: "Assistants Manager",
+      icon: RobotStrokeIcon,
+      href: `/w/${owner.sId}/builder/assistants`,
+      current: current === "assistants",
+      subMenuLabel: current === "assistants" ? subMenuLabel : undefined,
+      subMenu: current === "assistants" ? subMenu : undefined,
+    });
   }
 
   return nav;

front/pages/w/[wId]/builder/assistants/index.tsx

@@ -0,0 +1,93 @@
+import {
+  PageHeader,
+  PlusIcon,
+  RobotStrokeIcon,
+  SectionHeader,
+} from "@dust-tt/sparkle";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { useRouter } from "next/router";
+
+import AppLayout from "@app/components/sparkle/AppLayout";
+import { subNavigationAdmin } from "@app/components/sparkle/navigation";
+import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
+import { UserType, WorkspaceType } from "@app/types/user";
+
+const { GA_TRACKING_ID = "" } = process.env;
+
+export const getServerSideProps: GetServerSideProps<{
+  user: UserType | null;
+  owner: WorkspaceType;
+  gaTrackingId: string;
+}> = async (context) => {
+  const session = await getSession(context.req, context.res);
+
+  const user = await getUserFromSession(session);
+  if (!user) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const auth = await Authenticator.fromSession(
+    session,
+    context.params?.wId as string
+  );
+  if (!auth.isBuilder()) {
+    return {
+      notFound: true,
+    };
+  }
+  const owner = auth.workspace();
+  if (!owner) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      user,
+      owner,
+      gaTrackingId: GA_TRACKING_ID,
+    },
+  };
+};
+
+export default function AssistantsBuilder({
+  user,
+  owner,
+  gaTrackingId,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const router = useRouter();
+
+  return (
+    <AppLayout
+      user={user}
+      owner={owner}
+      gaTrackingId={gaTrackingId}
+      topNavigationCurrent="settings"
+      subNavigation={subNavigationAdmin({ owner, current: "assistants" })}
+    >
+      <PageHeader
+        title="Assistants Builder"
+        icon={RobotStrokeIcon}
+        description="Build an assistant."
+      />
+      <div>
+        <SectionHeader
+          title="Custom Assistants"
+          description="Build your own Assistant, use specific instructions and specific data sources to get better answers."
+          action={{
+            label: "Create a new Assistant",
+            type: "secondary",
+            icon: PlusIcon,
+            size: "sm",
+            onClick: () => {
+              void router.push(`/w/${owner.sId}/builder/assistants/new`);
+            },
+          }}
+        />
+      </div>
+    </AppLayout>
+  );
+}

front/pages/w/[wId]/builder/assistants/new.tsx

@@ -0,0 +1,85 @@
+import { Avatar, PageHeader, RobotStrokeIcon } from "@dust-tt/sparkle";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { useRouter } from "next/router";
+
+import AppLayout from "@app/components/sparkle/AppLayout";
+import { AppLayoutSimpleCloseTitle } from "@app/components/sparkle/AppLayoutTitle";
+import { subNavigationAdmin } from "@app/components/sparkle/navigation";
+import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
+import { UserType, WorkspaceType } from "@app/types/user";
+
+const { GA_TRACKING_ID = "" } = process.env;
+
+export const getServerSideProps: GetServerSideProps<{
+  user: UserType | null;
+  owner: WorkspaceType;
+  gaTrackingId: string;
+}> = async (context) => {
+  const session = await getSession(context.req, context.res);
+  const user = await getUserFromSession(session);
+  const auth = await Authenticator.fromSession(
+    session,
+    context.params?.wId as string
+  );
+
+  const owner = auth.workspace();
+  if (!owner) {
+    return {
+      notFound: true,
+    };
+  }
+
+  if (!auth.isBuilder()) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      user,
+      owner,
+      gaTrackingId: GA_TRACKING_ID,
+    },
+  };
+};
+
+export default function CreateAssistant({
+  user,
+  owner,
+  gaTrackingId,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const router = useRouter();
+
+  return (
+    <AppLayout
+      user={user}
+      owner={owner}
+      gaTrackingId={gaTrackingId}
+      topNavigationCurrent="settings"
+      subNavigation={subNavigationAdmin({
+        owner,
+        current: "assistants",
+      })}
+      titleChildren={
+        <AppLayoutSimpleCloseTitle
+          title="Design your custom assistant"
+          onClose={() => {
+            void router.push(`/w/${owner.sId}/builder/assistants`);
+          }}
+        />
+      }
+    >
+      <div className="mt-8 flex flex-col">
+        <PageHeader
+          title="Assistant Editor"
+          icon={RobotStrokeIcon}
+          description="Make and maintain your customized assistants."
+        />
+        <div className="mt-8 flex flex-row">
+          <Avatar size="lg" />
+        </div>
+      </div>
+    </AppLayout>
+  );
+}