Skip to content

Commit

Permalink
#93 Fixes for Card layout and visibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@santthosh
santthosh committed Jun 24, 2024
1 parent 135ab29 commit b70c56a
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 82 deletions.
Binary file added public/images/backgrounds/1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/backgrounds/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/app/api/assistants/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,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;
});
Expand Down
167 changes: 94 additions & 73 deletions src/app/assistants/ListAssistants.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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='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'>
<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>
Expand Down
26 changes: 18 additions & 8 deletions src/app/assistants/[id]/SideNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,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'>
Expand Down
2 changes: 1 addition & 1 deletion src/app/assistants/[id]/settings/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export default function Settings() {
<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
Public (Available for Everyone)
</h2>
<h3 className='p2 text-gray-400'>
When enabled this assistant will be available on the store.
Expand Down

0 comments on commit b70c56a

Please sign in to comment.