#93 Conversation Starters are now working

assistants-hub · Jun 27, 2024 · 8909d2d · 8909d2d
1 parent 2a4d46f
commit 8909d2d
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 2 deletions.
diff --git a/src/app/assistants/[id]/SideNavigation.tsx b/src/app/assistants/[id]/SideNavigation.tsx
@@ -15,6 +15,7 @@ import Image from 'next/image';
 import { getImageHash } from '@/app/utils/hash';
 import React, { useContext } from 'react';
 import AssistantContext from '@/app/assistants/[id]/AssistantContext';
+import Link from 'next/link';
 
 export default function SideNavigation() {
   const { assistant } = useContext(AssistantContext);
@@ -67,6 +68,16 @@ export default function SideNavigation() {
                   <span className='pt-4 text-xs text-gray-500 dark:text-gray-400'>
                     {assistant.description}
                   </span>
+                  <Link href={`/link/${assistant.id}`} target='_blank'>
+                    <Button
+                      size={'sm'}
+                      gradientDuoTone='greenToBlue'
+                      className={'float-right mt-3 mr-2 w-[150px]'}
+                    >
+                      <HiChatAlt2 className={'h-5 w-5'} />
+                      Try Assistant
+                    </Button>
+                  </Link>
                 </div>
               </Card>
             </Sidebar.ItemGroup>

diff --git a/src/app/assistants/[id]/chat/ChatConversationStarters.tsx b/src/app/assistants/[id]/chat/ChatConversationStarters.tsx
@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+import AssistantContext from '@/app/assistants/[id]/AssistantContext';
+import { Button } from 'flowbite-react';
+
+export interface ChatConversationStartersProps {
+  onClick?: (text:string)=> void
+}
+
+export default function ChatConversationStarters(props: ChatConversationStartersProps) {
+  const { assistant } = useContext(AssistantContext);
+
+  return (
+    <div className={'grid grid-flow-row-dense xs:grid-cols-1 sm:grid-cols-2 gap-4 pt-5 items-center justify-center'}>
+      {
+        assistant && assistant.theme && assistant.theme.conversationStarters ?
+          assistant.theme.conversationStarters.map(
+            (conversationStarter) => {
+              return (
+              <Button color="light"
+                      size={'md'}
+                      key={conversationStarter.id}
+                      className={'p-2 bg-gray-100 text-gray-500'}
+                      onClick={(e) => {
+                        props.onClick ? props.onClick(conversationStarter.prompt) : undefined
+                        e.stopPropagation();
+                      }}>
+                {conversationStarter.prompt}
+              </Button>
+              );
+            }
+          ) :<></>
+      }
+    </div>
+  );
+}
diff --git a/src/app/assistants/[id]/chat/ChatHeader.tsx b/src/app/assistants/[id]/chat/ChatHeader.tsx
@@ -28,7 +28,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
       >
         <div className='grid grid-cols-5'>
           <div className='col-span-4'>
-            <p className='max-w-md text-xl leading-relaxed'>{assistant.name}</p>
+            <p className='flex justify-start ml-5 max-w-md text-xl leading-relaxed'>{assistant.name}</p>
           </div>
           <div className='col-span-1'>
             {!props.minimize && props.setMinimize ? (
@@ -54,7 +54,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
         </div>
         <div
           className={
-            'w-60 text-xs ' + `text-[${getSecondaryTextColor(assistant)}]`
+            'flex justify-start ml-5 text-xs ' + `text-[${getSecondaryTextColor(assistant)}]`
           }
         >
           {assistant.description}

diff --git a/src/app/assistants/[id]/chat/ChatPage.tsx b/src/app/assistants/[id]/chat/ChatPage.tsx
@@ -13,6 +13,7 @@ import ChatMessage from '@/app/assistants/[id]/chat/ChatMessage';
 import ChatMessageStreaming from '@/app/assistants/[id]/chat/ChatMessageStreaming';
 import ChatTyping from '@/app/assistants/[id]/chat/ChatTyping';
 import { HiOutlinePencilAlt } from 'react-icons/hi';
+import ChatConversationStarters from '@/app/assistants/[id]/chat/ChatConversationStarters';
 
 export interface ChatPageProps {
   short?: boolean;
@@ -32,6 +33,7 @@ export default function ChatPage(props: ChatPageProps) {
     messages,
     sendMessage,
     createNewThread,
+    sendConversationStarter
   } = useChatContext();
 
   useEffect(() => {
@@ -65,6 +67,9 @@ export default function ChatPage(props: ChatPageProps) {
               {messages.map((message: Message, index) => {
                 return <ChatMessage key={index} message={message} />;
               })}
+              {
+                messages.length === 1 ? <ChatConversationStarters onClick={sendConversationStarter}/> : null
+              }
               {streamText ? (
                 <>
                   <ChatMessageStreaming

diff --git a/src/app/assistants/[id]/chat/ChatPopup.tsx b/src/app/assistants/[id]/chat/ChatPopup.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/app/utils/assistant';
 import { useChatContext } from '@/app/assistants/[id]/chat/useChatContext';
 import { HiOutlinePencilAlt } from 'react-icons/hi';
+import ChatConversationStarters from '@/app/assistants/[id]/chat/ChatConversationStarters';
 
 export interface ChatPopupProps extends ChatProps {
   hide: boolean;
@@ -38,6 +39,7 @@ export default function ChatPopup(props: ChatPopupProps) {
     setMessages,
     sendMessage,
     createNewThread,
+    sendConversationStarter
   } = useChatContext();
 
   useEffect(() => {
@@ -78,6 +80,9 @@ export default function ChatPopup(props: ChatPopupProps) {
                   {messages.map((message: Message, index) => {
                     return <ChatMessage key={index} message={message} />;
                   })}
+                  {
+                    messages.length === 1 ? <ChatConversationStarters onClick={sendConversationStarter}/> : null
+                  }
                   {streamText ? (
                     <>
                       <ChatMessageStreaming

diff --git a/src/app/assistants/[id]/chat/useChatContext.ts b/src/app/assistants/[id]/chat/useChatContext.ts
@@ -184,6 +184,26 @@ export const useChatContext = () => {
     setMessageStatus('in_progress' as string);
   };
 
+  const sendConversationStarter = async (prompt:string) => {
+    let message: Message = {
+      created_at: Date.now() / 1000,
+      role: 'user',
+      content: [
+        {
+          type: 'text',
+          text: {
+            value: prompt,
+            annotations: [],
+          },
+        },
+      ],
+    };
+    setCurrentMessage(message);
+    setMessages([...messages, message]);
+    setTypedMessage('');
+    setMessageStatus('in_progress' as string);
+  };
+
   const getAssistantThreadStorageKey = () => {
     return `ai.assistantshub.assistant.${assistant.id}.thread`;
   };
@@ -214,5 +234,6 @@ export const useChatContext = () => {
     setFingerprint,
     sendMessage,
     createNewThread,
+    sendConversationStarter
   };
 };