Using Rich Text output with Agentforce Actions

celebrate.html

<span style="display: inline-block; padding: 10px; background-image: radial-gradient(white 10%, transparent 11%); background color: pink; background-size: 20px 20px; color: black; font-size: 1.2em; font-family: sans-serif; background-color: pink;">This text has a pink polka dot background!</span>

smile.svg

SvgChartGeneratorAction.apex

public class SvgChartGeneratorFlowAction {

    public class ChartInput {
        @InvocableVariable(label='Bar Labels (e.g. Jan, Feb, Mar)' required=true)
        public List<String> labels;

        @InvocableVariable(label='Bar Values (e.g. 10, 20, 15)' required=true)
        public List<Integer> values;
    }

    public class ChartOutput {
        @InvocableVariable
        public String imageTag;

        public ChartOutput(String tag) {
            this.imageTag = tag;
        }
    }

    @InvocableMethod(label='Generate Bar Chart IMG Tag' description='Creates a bar chart SVG as an embedded <img> tag.')
    public static List<ChartOutput> generateBarChart(List<ChartInput> inputList) {
        if (inputList == null || inputList.isEmpty()) {
            return new List<ChartOutput>{ new ChartOutput('') };
        }

        ChartInput input = inputList[0]; // Only one input object is passed
        if (input.labels == null || input.values == null || input.labels.size() != input.values.size()) {
            return new List<ChartOutput>{ new ChartOutput('') };
        }

        Map<String, Integer> dataMap = new Map<String, Integer>();
        for (Integer i = 0; i < input.labels.size(); i++) {
            dataMap.put(input.labels[i], input.values[i]);
        }

        String svg = buildSvg(dataMap);
        String imgTag = '<img src="data:image/svg+xml,' + svg + '"/>';
        return new List<ChartOutput>{ new ChartOutput(imgTag) };
    }

    private static String buildSvg(Map<String, Integer> data) {
        Integer chartWidth = 400;
        Integer chartHeight = 150;
        Integer barWidth = 30;
        Integer barSpacing = 10;
        Integer barAreaHeight = chartHeight - 30;

        Integer maxValue = 1;
        for (Integer val : data.values()) {
            if (val > maxValue) maxValue = val;
        }

        List<String> bars = new List<String>();
        List<String> labels = new List<String>();

        Integer index = 0;
        for (String label : data.keySet()) {
            Integer value = data.get(label);
            Integer barHeight = (value * barAreaHeight) / maxValue;
            Integer x = 10 + index * (barWidth + barSpacing);
            Integer y = chartHeight - barHeight - 20;

            bars.add(
                '<rect x=\'' + x + '\' y=\'' + y + '\' width=\'' + barWidth +
                '\' height=\'' + barHeight + '\' fill=\'steelblue\' />'
            );

            labels.add(
                '<text x=\'' + (x + barWidth / 2) + '\' y=\'' + (chartHeight - 5) +
                '\' font-size=\'10\' text-anchor=\'middle\' fill=\'black\'>' + label + '</text>'
            );

            index++;
        }

        String svg =
            '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'' + chartWidth +
            '\' height=\'' + chartHeight + '\'>' +
            String.join(bars, '') +
            String.join(labels, '') +
            '</svg>';

        return svg;
    }
}