#93 Can toggle visibility now

prisma/migrations/20240622051714_adding_the_published_flag/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Assistant" ADD COLUMN     "published" BOOLEAN DEFAULT false;

prisma/schema.prisma

@@ -73,6 +73,7 @@ model Assistant {
   Thread                Thread[]
   Folder                Folder[]
   File                  File[]
+  published             Boolean?          @default(false)
   modelProviderKeyId    String?
   modelProviderKey      ModelProviderKey? @relation(fields: [modelProviderKeyId], references: [id])
 }

src/app/api/assistants/[id]/route.ts

@@ -24,6 +24,7 @@ export async function GET(req: NextRequest, res: NextResponse) {
       modelProviderKey: true,
       avatar: true,
       profile: true,
+      published: true,
       theme: true,
     },
   });
@@ -35,8 +36,6 @@ export async function GET(req: NextRequest, res: NextResponse) {
     );
   }
 
-  console.log(assistant.modelProviderKey);
-
   // Inject customization properties into the assistant object
   if (assistant.object) {
     // @ts-ignore
@@ -63,6 +62,8 @@ export async function GET(req: NextRequest, res: NextResponse) {
           name: assistant.modelProviderKey.name,
         }
       : null;
+    // @ts-ignore
+    assistant.object.published = assistant.published;
   }
 
   return Response.json(assistant.object, { status: 200 });

src/app/api/assistants/[id]/visibility/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from 'next/server';
+import prisma from '@/app/api/utils/prisma';
+import { getSession } from '@auth0/nextjs-auth0';
+
+const getId = (req: Request) => {
+  const url = new URL(req.url);
+  return url.pathname.split('/').splice(-2, 1)[0];
+};
+
+export async function PUT(req: NextRequest, res: NextResponse) {
+  const session = await getSession();
+  const id = getId(req);
+
+  try {
+    if (session?.user) {
+      let organization = await prisma.organization.findFirst({
+        where: {
+          owner: session?.user.sub,
+          ownerType: 'personal',
+        },
+      });
+
+      if (organization) {
+        let assistant = await prisma.assistant.findFirst({
+          where: {
+            id: id,
+          },
+          select: {
+            id: true,
+            organization: true,
+            published: true,
+          },
+        });
+
+        // @ts-ignore
+        if (!assistant || assistant.organization.id !== organization.id) {
+          return NextResponse.json({ message: 'Unauthorized' }, {
+            status: 401,
+          } as any);
+        } else {
+          await prisma.assistant.update({
+            where: {
+              id: assistant.id,
+            },
+            data: {
+              // @ts-ignore
+              published: !assistant.published,
+            },
+          });
+          return NextResponse.json(
+            { message: 'Update successful' },
+            { status: 200 }
+          );
+        }
+      }
+    }
+  } catch (error) {
+    return NextResponse.json({ message: (error as Error).message }, {
+      status: 400,
+    } as any);
+  }
+}

src/app/api/assistants/route.ts

@@ -18,6 +18,7 @@ export async function GET(req: NextRequest, res: NextResponse) {
         object: true,
         profile: true,
         modelId: true,
+        published: true,
       },
     });
     let assistantsCollection = assistants.map((assistant) => {
@@ -94,6 +95,7 @@ export async function POST(req: NextRequest, res: NextResponse) {
             organizationOwner: session?.user.sub,
             organizationOwnerType: 'personal',
             object: createResponse as any,
+            published: true,
           },
         });
 

src/app/api/auth/[auth0]/route.ts

@@ -2,6 +2,6 @@ import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';
 
 export const GET = handleAuth({
   login: handleLogin({
-    returnTo:'/assistants'
-  })
+    returnTo: '/assistants',
+  }),
 });

src/app/assistants/ListAssistants.tsx

@@ -79,7 +79,7 @@ export default function ListAssistants() {
                         <Badge color='info'>{assistant.modelId}</Badge>
                       </div>
                     </span>
-                    <span className='pt-4 max-w-xs max-h-15 overflow-y-hidden text-sm text-gray-500 dark:text-gray-400 text-center'>
+                    <span className='max-h-15 max-w-xs overflow-y-hidden pt-4 text-center text-sm text-gray-500 dark:text-gray-400'>
                       {assistant.description}
                     </span>
                     <div className='mt-4 grid items-center justify-center gap-2 xs:grid-cols-1 sm:grid-cols-2 lg:mt-6'>

src/app/assistants/[id]/SideNavigation.tsx

@@ -8,6 +8,7 @@ import {
   HiCog,
   HiChartBar,
   HiPuzzle,
+  HiShoppingBag,
 } from 'react-icons/hi';
 import { Assistant } from '@/app/types/assistant';
 import Image from 'next/image';

src/app/assistants/[id]/client.ts

@@ -279,6 +279,21 @@ export async function getMessageMetrics(request: MetricsRequest) {
   return [response.status, await response.json()];
 }
 
+export async function updateVisibilityStatus(id: string | undefined) {
+  if (!id) {
+    return [400, { error: 'Assistant ID is required' }];
+  }
+
+  let response = await fetch('/api/assistants/' + id + '/visibility', {
+    method: 'PUT',
+    headers: {
+      accept: 'application.json',
+    },
+  });
+
+  return [response.status, await response.json()];
+}
+
 export async function uploadFile(assistantId: string, file: File) {
   const formData = new FormData();
   formData.append('file', file);

src/app/assistants/[id]/settings/page.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import { Button, Modal, Table } from 'flowbite-react';
-import React, { useContext, useState } from 'react';
+import { Button, Modal, Table, ToggleSwitch } from 'flowbite-react';
+import React, { useCallback, useContext, useState } from 'react';
 import { HiOutlineExclamationCircle } from 'react-icons/hi';
-import { deleteAssistant } from '@/app/assistants/[id]/client';
+import {
+  deleteAssistant,
+  updateVisibilityStatus,
+} from '@/app/assistants/[id]/client';
 import { toast } from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
 import EditAssistant from '@/app/assistants/[id]/settings/EditAssistant';
@@ -12,9 +15,37 @@ import AssistantContext from '@/app/assistants/[id]/AssistantContext';
 export default function Settings() {
   const [openModal, setOpenModal] = useState(false);
   const { assistant } = useContext(AssistantContext);
+  console.log(assistant.published);
+  const [publish, setPublish] = useState(
+    assistant.published ? assistant.published : false
+  );
 
   const { push } = useRouter();
 
+  const toggleVisibility = async () => {
+    let visibility = !publish;
+    if (assistant && assistant.id) {
+      let [status, response] = await updateVisibilityStatus(assistant.id);
+      if (status === 200) {
+        let message =
+          'Assistant ' + assistant.name + ' now available in store.';
+
+        if (!visibility) {
+          message = 'Assistant ' + assistant.name + ' removed from store.';
+        }
+        setPublish(visibility);
+
+        toast.success(message, {
+          duration: 4000,
+        });
+      } else {
+        toast.error('Assistant ' + assistant.name + ' could not be deleted.', {
+          duration: 4000,
+        });
+      }
+    }
+  };
+
   const handleAssistantDelete = async () => {
     if (assistant && assistant.id) {
       let [status, response] = await deleteAssistant(assistant.id);
@@ -42,35 +73,61 @@ export default function Settings() {
         Adjust the original configuration of your assistant here
       </p>
       <div>
-        <Table className='flex flex-auto items-center justify-center self-center'>
+        <Table className='flex flex-auto items-center justify-start self-center'>
           <Table.Body className='divide-y'>
+            <Table.Row className='bg-white'>
+              <div className='flex max-w-7xl flex-col gap-4'>
+                <h1 className='p-2 pl-5 text-xl font-bold'>General Settings</h1>
+              </div>
+            </Table.Row>
             <Table.Row className='bg-white'>
               <EditAssistant assistant={assistant} />
             </Table.Row>
             <Table.Row className='bg-white'>
               <div className='flex max-w-7xl flex-col gap-4'>
-                <h1 className='p-2 pl-5 text-2xl font-bold'>Danger Zone</h1>
+                <h1 className='p-2 pl-5 text-xl font-bold'>Store</h1>
+              </div>
+            </Table.Row>
+            <Table.Row className='bg-white'>
+              <Table.Cell className='flex max-w-7xl flex-row gap-4 p-5 font-medium text-gray-900 dark:text-white'>
+                <div className='p2 flex max-w-md flex-col items-start'>
+                  <h2 className='p2 text-lg text-gray-700'>
+                    Available for Everyone
+                  </h2>
+                  <h3 className='p2 text-gray-400'>
+                    When enabled this assistant will be available on the store.
+                  </h3>
+                </div>
+                <div className='p2 ml-auto flex max-w-md items-center justify-center'>
+                  <ToggleSwitch checked={publish} onChange={toggleVisibility} />
+                </div>
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row className='bg-white'>
+              <div className='flex max-w-7xl flex-col gap-4'>
+                <h1 className='p-2 pl-5 text-xl font-bold'>Danger Zone</h1>
               </div>
             </Table.Row>
             <Table.Row className='bg-white'>
               <Table.Cell className='flex max-w-7xl flex-row gap-4 p-5 font-medium text-gray-900 dark:text-white'>
                 <div>
-                  <h2 className='p2 text-lg text-gray-800'>
+                  <h2 className='p2 text-lg text-gray-700'>
                     Delete this assistant
                   </h2>
                   <h3 className='p2 text-gray-400'>
                     Once you delete this assistant, there is no going back.
                     Please be certain.
                   </h3>
                 </div>
-                <Button
-                  className='ml-auto'
-                  outline
-                  gradientDuoTone='pinkToOrange'
-                  onClick={() => setOpenModal(true)}
-                >
-                  Delete
-                </Button>
+                <div className='p2 ml-auto flex max-w-md items-center justify-center pl-10'>
+                  <Button
+                    outline
+                    gradientDuoTone='pinkToOrange'
+                    onClick={() => setOpenModal(true)}
+                  >
+                    Delete
+                  </Button>
+                </div>
               </Table.Cell>
             </Table.Row>
           </Table.Body>

src/app/types/assistant.ts

@@ -30,4 +30,5 @@ export interface Assistant {
   avatar?: string | null;
   profile?: string | null;
   theme?: AssistantTheme | null;
+  published?: boolean;
 }