← All changes | src/Agent/components/messages/WorkflowMessage.jsx +18 -29 3.1.2 → 3.2.2 View file →

		@@ -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 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">
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,13 +39,12 @@
48	39	};
49	40
50	41	const WorkflowToolCompleted = ({ label }) => {
51	42	return (
52		- <div className="flex w-full items-start gap-2.5 p-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		- <div className="flex items-center gap-2 rounded-lg border border-wp-alert-green bg-wp-alert-green/20 p-3 text-green-900">
56		- <div className="h-6 w-6 leading-none">
	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">
57	47	<svg
58	48	xmlns="http://www.w3.org/2000/svg"
59	49	fill="none"
60	50	viewBox="0 0 24 24"
		@@ -71,9 +61,9 @@
71	61	</svg>
72	62	</div>
73	63	<div className="text-sm">
74	64	{decodeEntities(label) ||
75		- __('Workflow completed successfully', 'extendify-local')}
	65	+ __('Your site was updated', 'extendify-local')}
76	66	</div>
77	67	</div>
78	68	</div>
79	69	</div>
		@@ -81,15 +71,14 @@
81	71	};
82	72
83	73	const WorkflowToolCanceled = ({ label }) => {
84	74	return (
85		- <div className="flex w-full items-start gap-2.5 p-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		- <div className="flex items-center gap-2 rounded-lg border border-gray-300 bg-gray-50 p-3 text-gray-700">
	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) ||
91		- __('Workflow was canceled', 'extendify-local')}
	80	+ __('Canceled — nothing was changed', 'extendify-local')}
92	81	</div>
93	82	</div>
94	83	</div>
95	84	</div>