Merge pull request #94 from assistants-hub/93_store

Toggle for Public / Private assistants and visibility

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) => {
@@ -26,6 +27,8 @@ export async function GET(req: NextRequest, res: NextResponse) {
         assistant.object.profile = assistant.profile;
         // @ts-ignore
         assistant.object.modelId = assistant.modelId;
+        // @ts-ignore
+        assistant.object.published = assistant.published;
       }
       return assistant.object;
     });
@@ -94,6 +97,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

@@ -1,7 +1,14 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { Badge, Button, Card, Dropdown, DropdownItem } from 'flowbite-react';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Dropdown,
+  DropdownItem,
+} from 'flowbite-react';
 import { useGetAssistants } from '@/app/assistants/client';
 import Image from 'next/image';
 import {
@@ -46,89 +53,103 @@ export default function ListAssistants() {
           <HiPlus className='mr-2 h-5 w-5' /> Create Assistant
         </Button>
       </div>
-      <div className='bg-grey m-5 flex flex-auto items-start justify-center'>
+      <div className='bg-grey m-5 mt-10 flex grid flex-auto items-start justify-center'>
         <div
           className='4xl:grid-cols-4 grid
                              grid-cols-1
                              gap-12
-                             md:grid-cols-1
-                             xl:grid-cols-2
-                             2xl:grid-cols-2
-                             3xl:grid-cols-3'
+                             md:grid-cols-2
+                             xl:grid-cols-3
+                             2xl:grid-cols-4
+                             3xl:grid-cols-5'
         >
           {assistants &&
             assistants.length &&
             assistants.map((assistant, index) => {
               return (
-                <Card
-                  imgSrc={
-                    assistant.profile
-                      ? assistant.profile
-                      : '/images/people/' + getImageHash(assistant.id) + '.jpg'
-                  }
-                  className='xs:max-w-72 sm:min-w-max sm:max-w-xs'
-                  horizontal
-                  key={index}
-                >
-                  <div className='pb flex flex-col items-center'>
-                    <h5 className='mb-1 text-xl font-medium text-gray-900 dark:text-white'>
-                      {assistant.name}
-                    </h5>
-                    <span className='text-sm text-gray-500 dark:text-gray-400'>
-                      <div className='flex self-center'>
-                        <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'>
-                      {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'>
-                      <Link href={`/link/${assistant.id}`} target='_blank'>
-                        <Button gradientDuoTone='greenToBlue'>
-                          <HiChatAlt2 className='mr-1 h-5 w-5' /> Try Assistant
-                        </Button>
-                      </Link>
-                      <Dropdown label='Options' color={'light'} placement='top'>
-                        <DropdownItem
-                          icon={HiChartBar}
-                          href={`/assistants/${assistant.id}/analytics`}
-                        >
-                          Analytics
-                        </DropdownItem>
-                        <DropdownItem
-                          icon={HiChatAlt2}
-                          href={`/assistants/${assistant.id}/conversations`}
-                        >
-                          Conversations
-                        </DropdownItem>
-                        <DropdownItem
-                          icon={HiFolder}
-                          href={`/assistants/${assistant.id}/documents`}
+                <div className={'flex max-w-xs'} key={index}>
+                  <Card imgSrc={'/images/backgrounds/1.jpg'}>
+                    <Avatar
+                      img={
+                        assistant.avatar
+                          ? assistant.avatar
+                          : '/images/people/avatar/' +
+                            getImageHash(assistant.id) +
+                            '.jpg'
+                      }
+                      alt='avatar'
+                      size='xl'
+                      color='success'
+                      rounded
+                      className={'pb-1'}
+                    />
+                    <div className='flex flex-col items-center'>
+                      <h5 className='mb-1 text-xl font-medium text-gray-900 dark:text-white'>
+                        {assistant.name}
+                      </h5>
+                      <span className='text-sm text-gray-500 dark:text-gray-400'>
+                        <div className='flex self-center'>
+                          <Badge color='gray'>{assistant.modelId}</Badge>
+                          <Badge color={assistant.published ? 'green' : 'red'}>
+                            {assistant.published ? 'Public' : 'Private'}
+                          </Badge>
+                        </div>
+                      </span>
+                      <span className='max-h-12 min-h-12 max-w-xs overflow-y-hidden pt-4 text-center text-sm text-xs 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'>
+                        <Link href={`/link/${assistant.id}`} target='_blank'>
+                          <Button gradientDuoTone='greenToBlue'>
+                            Try Assistant
+                          </Button>
+                        </Link>
+                        <Dropdown
+                          label='Options'
+                          color={'light'}
+                          placement='top'
                         >
-                          Documents
-                        </DropdownItem>
-                        <DropdownItem
-                          icon={HiColorSwatch}
-                          href={`/assistants/${assistant.id}/customize`}
-                        >
-                          Customize
-                        </DropdownItem>
-                        <DropdownItem
-                          icon={HiPuzzle}
-                          href={`/assistants/${assistant.id}/integrate`}
-                        >
-                          Integrate
-                        </DropdownItem>
-                        <DropdownItem
-                          icon={HiCog}
-                          href={`/assistants/${assistant.id}/settings`}
-                        >
-                          Settings
-                        </DropdownItem>
-                      </Dropdown>
+                          <DropdownItem
+                            icon={HiChartBar}
+                            href={`/assistants/${assistant.id}/analytics`}
+                          >
+                            Analytics
+                          </DropdownItem>
+                          <DropdownItem
+                            icon={HiChatAlt2}
+                            href={`/assistants/${assistant.id}/conversations`}
+                          >
+                            Conversations
+                          </DropdownItem>
+                          <DropdownItem
+                            icon={HiFolder}
+                            href={`/assistants/${assistant.id}/documents`}
+                          >
+                            Documents
+                          </DropdownItem>
+                          <DropdownItem
+                            icon={HiColorSwatch}
+                            href={`/assistants/${assistant.id}/customize`}
+                          >
+                            Customize
+                          </DropdownItem>
+                          <DropdownItem
+                            icon={HiPuzzle}
+                            href={`/assistants/${assistant.id}/integrate`}
+                          >
+                            Integrate
+                          </DropdownItem>
+                          <DropdownItem
+                            icon={HiCog}
+                            href={`/assistants/${assistant.id}/settings`}
+                          >
+                            Settings
+                          </DropdownItem>
+                        </Dropdown>
+                      </div>
                     </div>
-                  </div>
-                </Card>
+                  </Card>
+                </div>
               );
             })}
         </div>

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';
@@ -33,19 +34,29 @@ export default function SideNavigation() {
           aria-label='Sidebar'
           className='z-40 flex flex-auto items-center justify-center bg-gray-50'
         >
-          <Sidebar.Items className='w-54 bg-gray-50'>
+          <Sidebar.Items className='bg-gray-50'>
             <Sidebar.ItemGroup>
               <Card
                 key={assistant.id}
-                imgSrc={
-                  assistant.profile
-                    ? assistant.profile
-                    : '/images/people/' + getImageHash(assistant.id) + '.jpg'
-                }
                 className={'bg-gray-50'}
+                imgSrc={'/images/backgrounds/1.jpg'}
               >
-                <div className='flex flex-col items-center'>
-                  <h5 className='mb-1 text-xl font-medium text-gray-900 dark:text-white'>
+                <Avatar
+                  img={
+                    assistant.avatar
+                      ? assistant.avatar
+                      : '/images/people/avatar/' +
+                        getImageHash(assistant.id) +
+                        '.jpg'
+                  }
+                  alt='avatar'
+                  size='xl'
+                  color='success'
+                  rounded
+                  className={'pb-1'}
+                />
+                <div className='flex flex-col items-center justify-center'>
+                  <h5 className='mb-1 text-center text-lg font-medium text-gray-900 dark:text-white'>
                     {assistant.name}
                   </h5>
                   <span className='text-sm text-gray-500 dark:text-gray-400'>

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);