| @@ -1,18 +1,18 @@ | ||
| 1 | -import { ChatSuggestions } from '@agent/components/ChatSuggestions'; | |
| 1 | +import { FollowUpCard } from '@agent/components/FollowUpCard'; | |
| 2 | 2 | import { Rating } from '@agent/components/Rating'; |
| 3 | 3 | import { decodeEntities } from '@wordpress/html-entities'; |
| 4 | 4 | import { __ } from '@wordpress/i18n'; |
| 5 | 5 | |
| 6 | 6 | // Note: this used to have more status like joined, cancelled, transferred etc. |
| 7 | -export const WorkflowMessage = ({ message }) => { | |
| 8 | - const { answerId, suggestions, status, label } = message.details; | |
| 7 | +export const WorkflowMessage = ({ message, latest }) => { | |
| 8 | + const { status, label } = message.details; | |
| 9 | 9 | |
| 10 | 10 | if (status === 'canceled') { |
| 11 | 11 | return ( |
| 12 | 12 | <> |
| 13 | 13 | <WorkflowToolCanceled label={label} /> |
| 14 | - <WorkflowFooter answerId={answerId} suggestions={suggestions} /> | |
| 14 | + <WorkflowFooter message={message} latest={latest} /> | |
| 15 | 15 | </> |
| 16 | 16 | ); |
| 17 | 17 | } |
| 18 | 18 | |
| @@ -19,31 +19,22 @@ | ||
| 19 | 19 | return ( |
| 20 | 20 | <> |
| 21 | 21 | {/* No label on a static-component finish — its own message shows the result. */} |
| 22 | 22 | {label && <WorkflowToolCompleted label={label} />} |
| 23 | - <WorkflowFooter answerId={answerId} suggestions={suggestions} /> | |
| 23 | + <WorkflowFooter message={message} latest={latest} /> | |
| 24 | 24 | </> |
| 25 | 25 | ); |
| 26 | 26 | }; |
| 27 | 27 | |
| 28 | -const WorkflowFooter = ({ answerId, suggestions }) => { | |
| 29 | - const hasSuggestions = suggestions?.length > 0; | |
| 30 | - if (!answerId && !hasSuggestions) return null; | |
| 28 | +const WorkflowFooter = ({ message, latest }) => { | |
| 29 | + const { answerId, followUp, followUpClosed } = message.details; | |
| 30 | + const showCard = latest && followUp && !followUpClosed; | |
| 31 | + if (!answerId && !showCard) return null; | |
| 31 | 32 | |
| 32 | 33 | return ( |
| 33 | - <div className="flex flex-col gap-px p-2 text-center text-xs italic"> | |
| 34 | + <div className="flex flex-col gap-px p-2"> | |
| 34 | 35 | {answerId && <Rating answerId={answerId} />} |
| 35 | - {hasSuggestions && ( | |
| 36 | - <div className="relative mb-4 ms-10 mt-4 flex flex-col gap-0.5 border-t border-gray-300 p-0 pt-4 text-sm text-gray-800"> | |
| 37 | - <p className="m-0 mb-2 p-0 px-2 text-left text-sm not-italic text-gray-900 rtl:text-right"> | |
| 38 | - {__( | |
| 39 | - "What's next? Would you like to do something else?", | |
| 40 | - 'extendify-local', | |
| 41 | - )} | |
| 42 | - </p> | |
| 43 | - <ChatSuggestions suggestions={suggestions} /> | |
| 44 | - </div> | |
| 45 | - )} | |
| 36 | + {showCard && <FollowUpCard message={message} />} | |
| 46 | 37 | </div> |
| 47 | 38 | ); |
| 48 | 39 | }; |
| 49 | 40 | |
| @@ -48,10 +39,9 @@ | ||
| 48 | 39 | }; |
| 49 | 40 | |
| 50 | 41 | const WorkflowToolCompleted = ({ label }) => { |
| 51 | 42 | return ( |
| 52 | - <div className="flex w-full items-start gap-2.5 px-2.5 py-2"> | |
| 53 | - <div className="w-7 shrink-0" /> | |
| 43 | + <div className="flex w-full items-start px-2.5 py-2"> | |
| 54 | 44 | <div className="flex min-w-0 flex-1 flex-col gap-1"> |
| 55 | 45 | <div className="flex items-center gap-2 border-l-4 border-l-wp-alert-green bg-wp-notice-success p-3 text-gray-900"> |
| 56 | 46 | <div className="h-6 w-6 leading-none text-wp-alert-green"> |
| 57 | 47 | <svg |
| @@ -81,10 +71,9 @@ | ||
| 81 | 71 | }; |
| 82 | 72 | |
| 83 | 73 | const WorkflowToolCanceled = ({ label }) => { |
| 84 | 74 | return ( |
| 85 | - <div className="flex w-full items-start gap-2.5 px-2.5 py-2"> | |
| 86 | - <div className="w-7 shrink-0" /> | |
| 75 | + <div className="flex w-full items-start px-2.5 py-2"> | |
| 87 | 76 | <div className="flex min-w-0 flex-1 flex-col gap-1"> |
| 88 | 77 | <div className="flex items-center gap-2 border-l-4 border-l-wp-notice-neutral bg-gray-50 p-3 text-gray-900"> |
| 89 | 78 | <div className="text-sm"> |
| 90 | 79 | {decodeEntities(label) || |
