43 Permalink is now ready

assistants-hub · May 22, 2024 · d254f97 · d254f97
1 parent 0a02ed7
commit d254f97
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/src/app/assistants/[id]/chat/ChatPage.tsx b/src/app/assistants/[id]/chat/ChatPage.tsx
@@ -19,11 +19,8 @@ export default function ChatPage() {
     typedMessage,
     setTypedMessage,
     messageStatus,
-    setMessageStatus,
     streamText,
-    setStreamText,
     messages,
-    setMessages,
     sendMessage,
   } = useChatContext();
 
@@ -40,14 +37,14 @@ export default function ChatPage() {
 
   return (
     <div key='1' className='flex h-screen flex-col'>
-      <div className='flex-grow space-y-4 pb-2 pt-1'>
+      <div className='flex space-y-4 bg-gray-100 pb-2 pt-1'>
         <ChatPageHeader />
       </div>
-      <div className='flex-grow space-y-4 overflow-auto p-4 pt-0'>
+      <div className='flex-grow space-y-4 overflow-auto 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 bg-white'}>
+          <div className={'max-w-2xl overflow-y-auto'}>
             <div
-              className='flex max-w-2xl flex-col gap-3 self-center overflow-y-auto px-4 py-4'
+              className='flex flex-col gap-3 self-center overflow-y-auto px-4 py-2'
               ref={messagesRef}
             >
               {messages.map((message: Message, index) => {
@@ -72,15 +69,15 @@ export default function ChatPage() {
           </div>
         </div>
       </div>
-      <div className='mx-auto w-full max-w-2xl rounded-lg border border-2 bg-white p-6 shadow md:w-[800px]'>
+      <div className='z-100 mx-auto w-full max-w-2xl rounded-lg border border-2 bg-white p-6 shadow md:w-[800px]'>
         {messageStatus === 'in_progress' ? (
           <span className='text-xs font-normal text-gray-500 dark:text-white'>
             {assistant.name} is typing...
           </span>
         ) : (
           <></>
         )}
-        <div className='flex items-center space-x-2'>
+        <div className='items-top flex space-x-2'>
           <TextInput
             className='block w-full rounded-lg border bg-white text-sm text-gray-900 dark:text-white dark:placeholder-gray-400'
             placeholder={getInputMessageLabel(assistant)}

diff --git a/src/app/assistants/[id]/chat/ChatPageHeader.tsx b/src/app/assistants/[id]/chat/ChatPageHeader.tsx
@@ -10,7 +10,7 @@ export function ChatPageHeader() {
   const { assistant } = useContext(AssistantContext);
 
   return (
-    <Card className='mx-auto my-auto max-w-2xl'>
+    <Card className='mx-auto my-auto flex max-w-2xl'>
       <div className='grid grid-cols-12 items-center'>
         <div className='col-span-2'>
           <Image

diff --git a/src/app/assistants/[id]/integrate/page.tsx b/src/app/assistants/[id]/integrate/page.tsx
@@ -6,9 +6,11 @@ import 'highlight.js/styles/github.css';
 import React, { useContext, useEffect } from 'react';
 import AssistantContext from '@/app/assistants/[id]/AssistantContext';
 import ChatAgentContextWrapper from '@/app/assistants/[id]/chat/ChatAgentContextWrapper';
-import { Table } from 'flowbite-react';
+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 Link from 'next/link';
 
 export default function Customize() {
   const { assistant } = useContext(AssistantContext);
@@ -21,17 +23,35 @@ export default function Customize() {
     <div className='max-w-screen flex flex-col gap-4'>
       <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
+        Use the below link direct users to your assistant or embed codes to
+        integrate to your web pages
       </p>
-      <div className='max-w-screen items-center justify-center'>
-        <Table className='max-w-3xl flex-auto'>
-          <Table.Body className='divide-y'>
+      <div className='max-w-2xl items-center justify-center'>
+        <Table className='max-w-2xl flex-auto '>
+          <Table.Body className='divide-y overflow-x-auto'>
+            <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800'>
+              <Table.Cell>
+                <div>Fully hosted assistant with a permanent URL</div>
+              </Table.Cell>
+              <Table.Cell className='bg-white dark:border-gray-700 dark:bg-gray-800'>
+                <div className='bg-white'>
+                  <Link href={`/link/${assistant.id}`} target='_blank'>
+                    <Button
+                      className='float-right'
+                      gradientDuoTone='purpleToBlue'
+                    >
+                      <HiLink className='mr-2 h-5 w-5' /> Go to Assistant
+                    </Button>
+                  </Link>
+                </div>
+              </Table.Cell>
+            </Table.Row>
             <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800'>
               <Table.Cell>
                 <div>
                   Floating assistant icon on the bottom right corner of the page
                 </div>
-                <div className='max-w-screen overflow-hidden text-sm'>
+                <div className='max-w-lg overflow-hidden text-sm'>
                   <Markdown>{`\`\`\`xml
 <iframe 
   src="${window.location.origin}/embed/${assistant.id}"
@@ -55,7 +75,7 @@ export default function Customize() {
             <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800'>
               <Table.Cell>
                 <div>Fixed chat window</div>
-                <div className='max-w-screen overflow-hidden text-sm'>
+                <div className='max-w-xl overflow-hidden text-sm'>
                   <Markdown>{`\`\`\`xml
 <iframe 
   src="${window.location.origin}/embed/${assistant.id}?style=window"
@@ -76,7 +96,7 @@ export default function Customize() {
             <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800'>
               <Table.Cell>
                 <div>Fixed chat window, without the outer frame</div>
-                <div className='max-w-screen overflow-hidden text-sm'>
+                <div className='max-w-xl overflow-hidden text-sm'>
                   <Markdown>{`\`\`\`xml
 <iframe 
   src="${window.location.origin}/embed/${assistant.id}?style=window-frameless"