#93 Tighter spacing for conversation starters

assistants-hub · Jun 26, 2024 · 5e491ee · 5e491ee
1 parent 6a330e8
commit 5e491ee
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 21 deletions.
diff --git a/src/app/assistants/[id]/chat/ChatPage.tsx b/src/app/assistants/[id]/chat/ChatPage.tsx
@@ -14,7 +14,11 @@ import ChatMessageStreaming from '@/app/assistants/[id]/chat/ChatMessageStreamin
 import ChatTyping from '@/app/assistants/[id]/chat/ChatTyping';
 import { HiOutlinePencilAlt } from 'react-icons/hi';
 
-export default function ChatPage() {
+export interface ChatPageProps {
+  short?: boolean;
+}
+
+export default function ChatPage(props: ChatPageProps) {
   const { assistant } = useContext(AssistantContext);
 
   const bottomRef = useRef(null);
@@ -44,10 +48,14 @@ export default function ChatPage() {
   return (
     <div
       key='1'
-      className='flex h-[calc(100vh-5rem)] max-h-full max-w-full flex-col'
+      className={
+        props.short
+          ? 'flex h-[800px] max-h-full max-w-full flex-col'
+          : 'flex h-[calc(100vh-5rem)] max-h-full max-w-full flex-col'
+      }
     >
       <ChatPageHeader />
-      <div className='flex-grow space-y-4 overflow-auto p-4 py-0 pt-0'>
+      <div className='flex-grow space-y-4 overflow-auto bg-white p-4 py-0 pt-0'>
         <div className='mx-auto flex max-w-2xl flex-col rounded-b rounded-t-none'>
           <div className={'max-w-2xl overflow-y-auto'}>
             <div

diff --git a/src/app/assistants/[id]/customize/AvatarCropUpload.tsx b/src/app/assistants/[id]/customize/AvatarCropUpload.tsx
@@ -139,7 +139,7 @@ const AvatarCropUpload = () => {
   };
 
   return (
-    <div className='space-y-6 p-6'>
+    <div className='flex'>
       <div id='fileUpload' className='grid max-w-2xl grid-cols-3'>
         <div className={'col-span-2'}>
           <div className='mb-2 block'>

diff --git a/src/app/assistants/[id]/customize/ColorPicker.tsx b/src/app/assistants/[id]/customize/ColorPicker.tsx
@@ -34,13 +34,13 @@ const ColorPicker = (props: ColorPickerProps) => {
   };
 
   return (
-    <div className='space-y-6 p-6'>
+    <div className='flex'>
       <div id='fileUpload' className='grid max-w-2xl grid-cols-3'>
         <div className={'col-span-2'}>
           <div className='mb-2 block'>
             <Label value={props.label} />
           </div>
-          <div className='grid max-w-xs grid-cols-2'>
+          <div className='grid max-w-xs grid-cols-2 pb-6'>
             <TextInput
               type='text'
               className='col-span-1'

diff --git a/src/app/assistants/[id]/customize/EditInitialPrompt.tsx b/src/app/assistants/[id]/customize/EditInitialPrompt.tsx
@@ -19,7 +19,7 @@ export const EditInitialPrompt: React.FC = () => {
   }
 
   return (
-    <div className='space-y-6 p-6'>
+    <div className='space-y-6'>
       <div id='fileUpload' className='grid max-w-4xl'>
         <div>
           <div className='mb-2 block'>

diff --git a/src/app/assistants/[id]/customize/EditMessageLabel.tsx b/src/app/assistants/[id]/customize/EditMessageLabel.tsx
@@ -19,7 +19,7 @@ export const EditMessageLabel: React.FC = () => {
   }
 
   return (
-    <div className='space-y-6 p-6'>
+    <div className='space-y-6'>
       <div id='fileUpload' className='grid max-w-4xl'>
         <div>
           <div className='mb-2 block'>

diff --git a/src/app/assistants/[id]/customize/ProfileCropUpload.tsx b/src/app/assistants/[id]/customize/ProfileCropUpload.tsx
@@ -141,7 +141,7 @@ const ProfileCropUpload = () => {
   };
 
   return (
-    <div className='space-y-6 p-6'>
+    <div className='flex'>
       <div id='fileUpload' className='grid max-w-2xl grid-cols-3'>
         <div className={'col-span-2'}>
           <div className='mb-2 block'>

diff --git a/src/app/assistants/[id]/customize/ThemeSelections.tsx b/src/app/assistants/[id]/customize/ThemeSelections.tsx
@@ -12,7 +12,7 @@ const ThemeSelections = () => {
   const { assistant, setAssistant } = useContext(AssistantContext);
 
   return (
-    <div className='p-6'>
+    <div className='p-1'>
       <div id='colors' className='grid max-w-2xl grid-cols-2'>
         <ColorPicker
           label='Primary Color'

diff --git a/src/app/assistants/[id]/customize/page.tsx b/src/app/assistants/[id]/customize/page.tsx
@@ -12,6 +12,7 @@ import ResetToDefaultsAlert from '@/app/assistants/[id]/customize/ResetToDefault
 import { EditInitialPrompt } from '@/app/assistants/[id]/customize/EditInitialPrompt';
 import { EditMessageLabel } from '@/app/assistants/[id]/customize/EditMessageLabel';
 import ChatPopupFrame from '@/app/assistants/[id]/chat/ChatPopupFrame';
+import ChatPage from '@/app/assistants/[id]/chat/ChatPage';
 
 export default function Customize() {
   const { assistant, setAssistant } = useContext(AssistantContext);
@@ -23,7 +24,7 @@ export default function Customize() {
       <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='grid gap-5 md:grid-cols-2'>
         <div className='col-span-1 max-h-[100vh] overflow-y-auto'>
           <Table className='max-w-3xl flex-auto'>
             <Table.Body className='divide-y'>
@@ -54,11 +55,10 @@ export default function Customize() {
               </Table.Row>
               <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800'>
                 <Table.Cell>
-                  <div className='space-y-6 p-6'>
+                  <div className='space-y-6'>
                     <Button
-                      className='bg-gray-50'
                       outline
-                      color={'red'}
+                      gradientDuoTone='pinkToOrange'
                       onClick={() => {
                         setOpenModal(true);
                       }}
@@ -84,8 +84,8 @@ export default function Customize() {
             });
           }}
         ></ResetToDefaultsAlert>
-        <div className='group col-span-1 m-auto flex items-center justify-start'>
-          <ChatPopupFrame hide={false} setHide={() => {}} />
+        <div className='group col-span-1 flex max-h-[400vh] items-start justify-start'>
+          <ChatPage short={true} />
         </div>
       </div>
     </div>

diff --git a/src/app/assistants/[id]/integrate/page.tsx b/src/app/assistants/[id]/integrate/page.tsx
@@ -9,7 +9,7 @@ import ChatAgentContextWrapper from '@/app/assistants/[id]/chat/ChatAgentContext
 import { Button, Table } from 'flowbite-react';
 import ChatWindowContextWrapper from '@/app/assistants/[id]/chat/ChatWindowContextWrapper';
 import ChatPopupContextWrapper from '@/app/assistants/[id]/chat/ChatPopupContextWrapper';
-import { HiLibrary, HiLink, HiPlus } from 'react-icons/hi';
+import { HiChatAlt2, HiLibrary, HiLink, HiPlus } from 'react-icons/hi';
 import Link from 'next/link';
 
 export default function Customize() {
@@ -37,10 +37,11 @@ export default function Customize() {
                 <div className='bg-white'>
                   <Link href={`/link/${assistant.id}`} target='_blank'>
                     <Button
-                      className='float-right'
-                      gradientDuoTone='purpleToBlue'
+                      gradientDuoTone='greenToBlue'
+                      className={'float-right mr-2 w-[150px]'}
                     >
-                      <HiLink className='mr-2 h-5 w-5' /> Go to Assistant
+                      <HiChatAlt2 className={'h-5 w-5'} />
+                      Try Assistant
                     </Button>
                   </Link>
                 </div>
@@ -109,7 +110,7 @@ export default function Customize() {
                 </div>
               </Table.Cell>
               <Table.Cell className='bg-white dark:border-gray-700 dark:bg-gray-800'>
-                <div className='bg-white'>
+                <div className='max-h-[900px] bg-white'>
                   <ChatPopupContextWrapper />
                 </div>
               </Table.Cell>