updated follow up logic

reaviz · Aug 27, 2024 · 23e1109 · 23e1109
1 parent d3334fb
commit 23e1109
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 67 deletions.
diff --git a/src/SessionMessages/SessionMessage/MessageResponseRecommended.tsx b/src/SessionMessages/SessionMessage/MessageResponseRecommended.tsx
@@ -8,25 +8,15 @@ import { PluggableList } from 'react-markdown/lib';
 
 export interface MessageResponseRecommendedProps extends PropsWithChildren {
   /**
-   * Initial response to render.
+   * Follow-up response to render (array of values).
    */
-  response: string;
-
-  /**
-   * Follow-up response to render.
-   */
-  followUpResponse: string;
+  followUpResponse: string[];
 
   /**
    * Whether the response is loading.
    */
   isLoading?: boolean;
 
-  /**
-   * Function to handle clicks on the response.
-   */
-  onClickResponse?: (response: string) => void;
-
   /**
    * Function to handle clicks on the follow-up response.
    */
@@ -40,14 +30,7 @@ const isImageUrl = (url: string) => {
 
 export const MessageResponseRecommended: FC<
   MessageResponseRecommendedProps
-> = ({
-  response,
-  followUpResponse,
-  isLoading,
-  children,
-  onClickResponse,
-  onClickFollowUpResponse
-}) => {
+> = ({ followUpResponse, isLoading, children, onClickFollowUpResponse }) => {
   const { theme, isCompact, remarkPlugins } = useContext(ChatContext);
   const Comp = children ? Slot : 'div';
 
@@ -58,40 +41,30 @@ export const MessageResponseRecommended: FC<
     >
       {children || (
         <>
-          <div onClick={() => onClickResponse?.(response)}>
-            {isImageUrl(response) ? (
-              <figure>
-                <img
-                  src={response}
-                  alt={response}
-                  className={cn(theme.messages.message.rimage)}
-                />
-              </figure>
-            ) : (
-              <div className={cn(theme.messages.message.markdownBorder)}>
-                <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
-                  {response}
-                </Markdown>
-              </div>
-            )}
-          </div>
-          <div onClick={() => onClickFollowUpResponse?.(followUpResponse)}>
-            {isImageUrl(followUpResponse) ? (
-              <figure>
-                <img
-                  src={followUpResponse}
-                  alt={followUpResponse}
-                  className={cn(theme.messages.message.rimage)}
-                />
-              </figure>
-            ) : (
-              <div className={cn(theme.messages.message.markdownBorder)}>
-                <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
-                  {followUpResponse}
-                </Markdown>
-              </div>
-            )}
-          </div>
+          {/* Map over follow-up responses to display them individually */}
+          {followUpResponse.map((responseItem, index) => (
+            <div
+              key={index}
+              onClick={() => onClickFollowUpResponse?.(responseItem)}
+            >
+              {isImageUrl(responseItem) ? (
+                <figure>
+                  <img
+                    src={responseItem}
+                    alt={responseItem}
+                    className={cn(theme.messages.message.rimage)}
+                  />
+                </figure>
+              ) : (
+                <div className={cn(theme.messages.message.markdownBorder)}>
+                  <Markdown remarkPlugins={remarkPlugins as PluggableList[]}>
+                    {responseItem}
+                  </Markdown>
+                </div>
+              )}
+            </div>
+          ))}
+
           {isLoading && (
             <motion.div
               className={cn(theme.messages.message.cursor)}

diff --git a/src/SessionMessages/SessionMessage/SessionMessage.tsx b/src/SessionMessages/SessionMessage/SessionMessage.tsx
@@ -42,7 +42,9 @@ export const SessionMessage: FC<SessionMessageProps> = ({
   children
 }) => {
   const { theme, isLoading } = useContext(ChatContext);
-  const hasFollowUpResponse = !!conversation.followUpResponse;
+  const hasFollowUpResponse =
+    Array.isArray(conversation.followUpResponse) &&
+    conversation.followUpResponse.length > 0;
 
   return (
     <motion.div key={conversation.id} variants={messageVariants}>
@@ -54,17 +56,16 @@ export const SessionMessage: FC<SessionMessageProps> = ({
               files={conversation.files}
             />
 
-            {hasFollowUpResponse ? (
+            <MessageResponse
+              response={conversation.response}
+              isLoading={isLast && isLoading}
+            />
+
+            {hasFollowUpResponse && (
               <MessageResponseRecommended
-                response={conversation.response}
                 followUpResponse={conversation.followUpResponse}
                 isLoading={isLast && isLoading}
               />
-            ) : (
-              <MessageResponse
-                response={conversation.response}
-                isLoading={isLast && isLoading}
-              />
             )}
 
             <MessageSources sources={conversation.sources} />

diff --git a/src/theme.ts b/src/theme.ts
@@ -143,7 +143,7 @@ export const chatTheme: ChatTheme = {
         "overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-gradient-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200",
       cursor: 'inline-block w-1 h-4 bg-current',
       expand: 'absolute bottom-1 right-1 z-10',
-      recommended: 'flex gap-4 justify-around',
+      recommended: 'flex gap-4 justify-around mt-8',
       rimage: ' max-w-[250px] max-h-[250px] object-cover cursor-pointer',
       markdownBorder: [
         'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-4xl rounded-[10px] cursor-pointer text-typography border bg-gray-200 border-gray-300 text-gray-900',

diff --git a/src/types.ts b/src/types.ts
@@ -66,7 +66,7 @@ export interface Conversation {
    * The AI's follow-upresponse to the user's question
    */
 
-  followUpResponse?: string;
+  followUpResponse?: string[];
 
   /**
    * Array of sources referenced in the conversation

diff --git a/stories/examples.ts b/stories/examples.ts
@@ -190,8 +190,10 @@ export const sessionWithMessageResponseRecommended: Session[] = [
         createdAt: new Date(),
         response:
           'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png',
-        followUpResponse:
+        followUpResponse: [
           'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png',
+          'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png'
+        ],
         updatedAt: new Date()
       }
     ]
@@ -208,8 +210,10 @@ export const sessionWithMessageResponseRecommended: Session[] = [
         createdAt: new Date(),
         response:
           'React benefits include a declarative coding style, component-based architecture, virtual DOM, and a large community and ecosystem.',
-        followUpResponse:
-          'React’s state management system enables components to maintain their own state and efficiently re-render only when necessary, making it easier to build responsive and interactive UIs.',
+        followUpResponse: [
+          'What are some downsides of React?',
+          'What are alternative options to React?'
+        ],
         updatedAt: new Date()
       }
     ]