← All changes | src/Agent/components/messages/WorkflowMessage.jsx +75 -14 3.0.4 → 3.2.2 View file →

		@@ -1,25 +1,86 @@
1		-import { ChatSuggestions } from '@agent/components/ChatSuggestions';
	1	+import { FollowUpCard } from '@agent/components/FollowUpCard';
2	2	import { Rating } from '@agent/components/Rating';
	3	+import { decodeEntities } from '@wordpress/html-entities';
3	4	import { __ } from '@wordpress/i18n';
4	5
5	6	// Note: this used to have more status like joined, cancelled, transferred etc.
6		-export const WorkflowMessage = ({ message }) => {
7		- const { answerId, suggestions } = message.details;
	7	+export const WorkflowMessage = ({ message, latest }) => {
	8	+ const { status, label } = message.details;
8	9
	10	+ if (status === 'canceled') {
	11	+ return (
	12	+ <>
	13	+ <WorkflowToolCanceled label={label} />
	14	+ <WorkflowFooter message={message} latest={latest} />
	15	+ </>
	16	+ );
	17	+ }
	18	+
9	19	return (
10		- <div className="flex flex-col gap-px p-2 text-center text-xs italic">
	20	+ <>
	21	+ {/* No label on a static-component finish — its own message shows the result. */}
	22	+ {label && <WorkflowToolCompleted label={label} />}
	23	+ <WorkflowFooter message={message} latest={latest} />
	24	+ </>
	25	+ );
	26	+};
	27	+
	28	+const WorkflowFooter = ({ message, latest }) => {
	29	+ const { answerId, followUp, followUpClosed } = message.details;
	30	+ const showCard = latest && followUp && !followUpClosed;
	31	+ if (!answerId && !showCard) return null;
	32	+
	33	+ return (
	34	+ <div className="flex flex-col gap-px p-2">
11	35	{answerId && <Rating answerId={answerId} />}
12		- {suggestions?.length > 0 ? (
13		- <div className="relative mb-4 ml-9 mr-2 mt-4 flex flex-col gap-0.5 border-t border-gray-300 p-0 pt-4 text-sm text-gray-800 rtl:ml-2 rtl:mr-9">
14		- <p className="m-0 mb-2 p-0 px-2 text-left text-sm not-italic text-gray-900 rtl:text-right">
15		- {__(
16		- "What's next? Would you like to do something else?",
17		- 'extendify-local',
18		- )}
19		- </p>
20		- <ChatSuggestions suggestions={suggestions} />
	36	+ {showCard && <FollowUpCard message={message} />}
	37	+ </div>
	38	+ );
	39	+};
	40	+
	41	+const WorkflowToolCompleted = ({ label }) => {
	42	+ return (
	43	+ <div className="flex w-full items-start px-2.5 py-2">
	44	+ <div className="flex min-w-0 flex-1 flex-col gap-1">
	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">
	46	+ <div className="h-6 w-6 leading-none text-wp-alert-green">
	47	+ <svg
	48	+ xmlns="http://www.w3.org/2000/svg"
	49	+ fill="none"
	50	+ viewBox="0 0 24 24"
	51	+ strokeWidth={1.5}
	52	+ stroke="currentColor"
	53	+ className="size-6"
	54	+ >
	55	+ <title>{__('Success icon', 'extendify-local')}</title>
	56	+ <path
	57	+ strokeLinecap="round"
	58	+ strokeLinejoin="round"
	59	+ d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
	60	+ />
	61	+ </svg>
	62	+ </div>
	63	+ <div className="text-sm">
	64	+ {decodeEntities(label) ||
	65	+ __('Your site was updated', 'extendify-local')}
	66	+ </div>
21	67	</div>
22		- ) : null}
	68	+ </div>
	69	+ </div>
	70	+ );
	71	+};
	72	+
	73	+const WorkflowToolCanceled = ({ label }) => {
	74	+ return (
	75	+ <div className="flex w-full items-start px-2.5 py-2">
	76	+ <div className="flex min-w-0 flex-1 flex-col gap-1">
	77	+ <div className="flex items-center gap-2 border-l-4 border-l-wp-notice-neutral bg-gray-50 p-3 text-gray-900">
	78	+ <div className="text-sm">
	79	+ {decodeEntities(label) ||
	80	+ __('Canceled — nothing was changed', 'extendify-local')}
	81	+ </div>
	82	+ </div>
	83	+ </div>
23	84	</div>
24	85	);
25	86	};