← All changes | src/Agent/components/messages/WorkflowMessage.jsx +76 -4 3.0.5 → trunk View file →

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