| @@ -1,13 +1,12 @@ | ||
| 1 | 1 | import { recordAgentActivity } from '@agent/api'; |
| 2 | 2 | import { AnimateChunks } from '@agent/components/messages/AnimateChunks'; |
| 3 | -import { magic } from '@agent/icons'; | |
| 3 | +import { ReplyOptions } from '@agent/components/ReplyOptions'; | |
| 4 | 4 | import pageTours from '@agent/lib/page-tours'; |
| 5 | 5 | import tours from '@agent/tours/tours'; |
| 6 | 6 | import { SingleTour } from '@agent/workflows/misc/components/ToursList'; |
| 7 | 7 | import { decodeEntities } from '@wordpress/html-entities'; |
| 8 | 8 | import { __ } from '@wordpress/i18n'; |
| 9 | -import { cog, Icon, lifesaver, pencil, styles } from '@wordpress/icons'; | |
| 10 | 9 | import ReactMarkdown from 'react-markdown'; |
| 11 | 10 | |
| 12 | 11 | const availableTours = Object.values(tours); |
| 13 | 12 | const adminPages = window.extAgentData.agentContext?.availableAdminPages || []; |
| @@ -22,21 +21,14 @@ | ||
| 22 | 21 | }, |
| 23 | 22 | ]), |
| 24 | 23 | ) || {}; |
| 25 | 24 | |
| 26 | -const agentIcons = { | |
| 27 | - agent1: lifesaver, | |
| 28 | - agent2: styles, | |
| 29 | - agent3: pencil, | |
| 30 | - agent4: cog, | |
| 31 | -}; | |
| 32 | - | |
| 33 | -export const AgentMessage = ({ message, animate }) => { | |
| 25 | +export const AgentMessage = ({ message, animate, active }) => { | |
| 34 | 26 | const { |
| 35 | 27 | content, |
| 36 | 28 | role, |
| 37 | 29 | pageSuggestion, |
| 38 | - agent, | |
| 30 | + qaSuggestions, | |
| 39 | 31 | sessionId = 'not-set', |
| 40 | 32 | } = message.details; |
| 41 | 33 | const containsCodeBlock = /```[\s\S]*?```/.test(content); |
| 42 | 34 | const blocks = containsCodeBlock |
| @@ -51,21 +43,10 @@ | ||
| 51 | 43 | |
| 52 | 44 | return ( |
| 53 | 45 | <div |
| 54 | 46 | data-agent-message-role={role} |
| 55 | - className="flex w-full items-start gap-2.5 p-2" | |
| 47 | + className="flex w-full items-start px-2.5 py-2" | |
| 56 | 48 | > |
| 57 | - <div className="w-7 shrink-0"> | |
| 58 | - {agent?.avatar ? ( | |
| 59 | - <img className="mt-px" src={agent.avatar} alt={agent.name} /> | |
| 60 | - ) : ( | |
| 61 | - <Icon | |
| 62 | - className="-mt-0.5 fill-gray-900" | |
| 63 | - icon={agentIcons[agent?.id] ?? magic} | |
| 64 | - size={28} | |
| 65 | - /> | |
| 66 | - )} | |
| 67 | - </div> | |
| 68 | 49 | <div className="flex min-w-0 flex-1 flex-col gap-4"> |
| 69 | 50 | <div className="extendify-agent-markdown w-full"> |
| 70 | 51 | {animate ? ( |
| 71 | 52 | <AnimateChunks words={blocks} delay={0.1} duration={0.35} /> |
| @@ -94,8 +75,21 @@ | ||
| 94 | 75 | <div> |
| 95 | 76 | <SingleTour tour={agentSuggestion.tour} /> |
| 96 | 77 | </div> |
| 97 | 78 | )} |
| 79 | + {/* An empty array still renders — it's the agent asking with no drafts. */} | |
| 80 | + {active && Array.isArray(qaSuggestions) ? ( | |
| 81 | + <ReplyOptions | |
| 82 | + options={qaSuggestions} | |
| 83 | + onSubmit={(message) => | |
| 84 | + window.dispatchEvent( | |
| 85 | + new CustomEvent('extendify-agent:chat-submit', { | |
| 86 | + detail: { message }, | |
| 87 | + }), | |
| 88 | + ) | |
| 89 | + } | |
| 90 | + /> | |
| 91 | + ) : null} | |
| 98 | 92 | </div> |
| 99 | 93 | </div> |
| 100 | 94 | ); |
| 101 | 95 | }; |
