#55 Cleanup file manager

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

@@ -89,7 +89,8 @@ export default function Analytics() {
 
   return assistant.id ? (
     <div className='flex flex-col gap-4'>
-      <h3 className='pb-4 text-3xl font-bold dark:text-white'>Analytics</h3>
+      <h3 className='text-3xl font-bold dark:text-white'>Analytics</h3>
+      <p className={"pb-4 text-sm text-gray-400"}>Observe metrics for your assistant</p>
       <div className='flex flex-row-reverse'>
         <Dropdown label={selectedTimePeriod} outline={true} color={'gray'}>
           <Dropdown.Item onClick={() => userSelectedTimePeriod('Yesterday')}>

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

@@ -19,43 +19,44 @@ export default function Conversations() {
 
   return assistant.id ? (
     !threadsLoading ? (
-      <div className='max-w-screen flex max-h-full flex-col gap-4'>
-        <h3 className='pb-4 text-3xl font-bold dark:text-white'>
+      <div className="max-w-screen flex max-h-full flex-col gap-4">
+        <h3 className="text-3xl font-bold dark:text-white">
           Conversations
         </h3>
-        <div className='relative overflow-x-auto shadow-md sm:rounded-lg'>
-          <Table hoverable className='flex-auto self-center'>
+        <p className={'pb-4 text-sm text-gray-400'}>Logs of your assistant&apos;s conversations are available below</p>
+        <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
+          <Table hoverable className="flex-auto self-center">
             <Table.Head>
               <Table.HeadCell>Thread</Table.HeadCell>
               <Table.HeadCell>Messages</Table.HeadCell>
               <Table.HeadCell>User</Table.HeadCell>
               <Table.HeadCell>Device</Table.HeadCell>
               <Table.HeadCell>Location</Table.HeadCell>
             </Table.Head>
-            <Table.Body className='divide-y'>
+            <Table.Body className="divide-y">
               {threads && threads.length ? (
                 threads.map((thread) => (
                   <Table.Row
                     key={thread.id}
-                    className='bg-white dark:border-gray-700 dark:bg-gray-800'
+                    className="bg-white dark:border-gray-700 dark:bg-gray-800"
                   >
                     <Table.Cell>
-                      <span className='font-semibold text-gray-700'>
+                      <span className="font-semibold text-gray-700">
                         {thread.id}
                       </span>
                       <br />
-                      <span className='font-small text-gray-400'>
+                      <span className="font-small text-gray-400">
                         {formatRelativeUnixTime(thread.created_at)}
                       </span>
                     </Table.Cell>
                     <Table.Cell>
                       <a
-                        href='#'
-                        className='font-medium text-cyan-600 hover:underline dark:text-cyan-500'
+                        href="#"
+                        className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
                       >
                         <Button
-                          type='submit'
-                          className='inline-flex cursor-pointer justify-center p-1 dark:hover:bg-gray-600'
+                          type="submit"
+                          className="inline-flex cursor-pointer justify-center p-1 dark:hover:bg-gray-600"
                           color={'gray'}
                           onClick={() => {
                             setOpenModal(true);

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

@@ -19,7 +19,8 @@ export default function Customize() {
 
   return assistant.id ? (
     <div className='max-w-screen flex flex-col gap-4'>
-      <h3 className='pb-4 text-3xl font-bold dark:text-white'>Customize</h3>
+      <h3 className='text-3xl font-bold dark:text-white'>Customize</h3>
+      <p className={'pb-4 text-sm text-gray-400'}>Adjust the look and feel of your assistant to match your preferences</p>
       <div className='grid md:grid-cols-2'>
         <div className='col-span-1 max-h-[100vh] overflow-y-auto'>
           <Table className='max-w-3xl flex-auto'>
@@ -82,7 +83,8 @@ export default function Customize() {
           }}
         ></ResetToDefaultsAlert>
         <div className='group col-span-1 m-auto flex items-center justify-start'>
-          <ChatPopupFrame hide={false} setHide={() => {}} />
+          <ChatPopupFrame hide={false} setHide={() => {
+          }} />
         </div>
       </div>
     </div>

src/app/assistants/[id]/documents/DocumentsEmpty.tsx

@@ -0,0 +1,23 @@
+import { HiCloudUpload } from 'react-icons/hi';
+import React from 'react';
+
+export default function DocumentsEmpty() {
+  return (
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-1">
+        <label htmlFor="dropzone-file" className="flex flex-col gap-6">
+          <div className="rounded-lg border border-gray-200 p-6 dark:border-gray-800">
+            <div
+              className="flex flex-col items-center justify-center gap-4 border-2 border-dashed border-gray-200 rounded-lg p-12 dark:border-gray-800">
+              <HiCloudUpload className="text-9xl text-gray-400 dark:text-gray-700" />
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Click to upload or drag and drop
+              </p>
+              <input id="dropzone-file" type="file" className="hidden" />
+            </div>
+          </div>
+        </label>
+      </div>
+  );
+}
+
+

src/app/assistants/[id]/documents/DocumentsManager.tsx

@@ -0,0 +1,25 @@
+import { Button } from 'flowbite-react';
+import DocumentsEmpty from '@/app/assistants/[id]/documents/DocumentsEmpty';
+import { HiCloudUpload } from 'react-icons/hi';
+import React from 'react';
+
+
+export default function DocumentsManager() {
+  return (
+    <div className="flex flex-col gap-8 p-6 md:p-10">
+      <div className="flex items-center justify-between">
+        <h3 className="text-3xl font-bold"></h3>
+        <Button
+          className='float-right'
+          gradientDuoTone='purpleToBlue'
+          onClick={() => {}}
+        >
+          <HiCloudUpload className='mr-2 h-5 w-5' /> Upload Files
+        </Button>
+      </div>
+      <DocumentsEmpty />
+    </div>
+  )
+}
+
+

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

@@ -6,6 +6,7 @@ import { getModel } from '@/app/assistants/[id]/client';
 import { Spinner } from 'flowbite-react';
 import { Model } from '@/app/types/model';
 import { HiOutlineFolder } from "react-icons/hi";
+import DocumentsManager from '@/app/assistants/[id]/documents/DocumentsManager';
 
 export default function Documents() {
   const { assistant } = useContext(AssistantContext);
@@ -34,7 +35,8 @@ export default function Documents() {
           <div>
             { model?.features?.retrieval ? (
                 <div>
-                  This model supports document retrieval, we are working on it
+                  <p className={"text-sm text-gray-400"}>Upload documents that will be used for retrieval function by your assistant</p>
+                  <DocumentsManager/>
                 </div>
               ) : (
                 <div className='bg-grey flex flex-col h-[calc(100vh-120px)] items-center justify-center'>

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

@@ -19,12 +19,10 @@ export default function Customize() {
 
   return assistant.id ? (
     <div className='max-w-screen flex flex-col gap-4'>
-      <h3 className='pb-4 text-3xl font-bold dark:text-white'>Integrate</h3>
+      <h3 className='text-3xl font-bold dark:text-white'>Integrate</h3>
+      <p className={'pb-4 text-sm text-gray-400'}>Use the below embed code to integrate your assistant to any web
+        page</p>
       <div className='max-w-screen items-center justify-center'>
-        <p className='self-center pb-2 text-sm font-normal text-gray-500 dark:text-gray-400 lg:text-lg'>
-          Please use the below embed code in integrate your assistant to any web
-          page
-        </p>
         <Table className='max-w-3xl flex-auto'>
           <Table.Body className='divide-y'>
             <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800'>

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

@@ -38,6 +38,7 @@ export default function Settings() {
   return (
     <div className='stack items-center justify-center'>
       <h3 className='pb-4 text-3xl font-bold dark:text-white'>Settings</h3>
+      <p className={'pb-4 text-sm text-gray-400'}>Adjust the original configuration of your assistant here</p>
       <div>
         <Table className='flex-auto self-center'>
           <Table.Body className='divide-y'>

src/components/user-profile.tsx

@@ -27,7 +27,7 @@ export const UserProfile = async () => {
           href='https://docs.assistantshub.ai/'
           className='justify-end'
         >
-          <div className='pt-1 text-xl font-normal'>Docs</div>
+          <div className='pt-1 lg:text-lg'>Docs</div>
         </NavbarLink>
         <SignIn />
       </NavbarCollapse>
@@ -58,19 +58,19 @@ export const UserProfile = async () => {
           </Dropdown>
         </div>
         <NavbarLink href='/'>
-          <div className='pt-2 text-xl font-normal'>Home</div>
+          <div className='pt-2 lg:text-lg'>Home</div>
         </NavbarLink>
         <NavbarLink href='/assistants' className='justify-end'>
-          <div className='pt-2 text-xl font-normal'>Assistants</div>
+          <div className='pt-2 lg:text-lg'>Assistants</div>
         </NavbarLink>
         <NavbarLink
           href='https://docs.assistantshub.ai/'
           className='justify-end'
         >
-          <div className='pt-2 text-xl font-normal'>Docs</div>
+          <div className='pt-2 lg:text-lg'>Docs</div>
         </NavbarLink>
         <NavbarLink href='mailto:[email protected]' className='justify-end'>
-          <div className='pt-2 text-xl font-normal'>Help</div>
+          <div className='pt-2 lg:text-lg'>Help</div>
         </NavbarLink>
         <NavbarLink className='justify-end'>
           <DarkThemeToggle />