Richcantoo•2mo ago

Flashing Output in AI Agent

I am testing my AI Agent, which generates code, and I noticed that the output background flashes between black and white while the code is being generated. It doesn't do this when it's generating standard text, only when providing code.

2 Replies

Tico | Voiceflow Assistant•2mo ago

Why it happens
When the assistant streams a message that is tagged as a Markdown code-block (

…

…

), the web-chat first prints the raw text, then runs the syntax-highlighter. The highlighter swaps in a dark code theme after it recognises the language, so on every incremental update you momentarily see the default (white) background before it is restyled – that’s the “flash”. It does not occur on normal text because those lines are never passed through the highlighter. Fix / work-arounds
1. Turn the highlighter off for a response
‑ add text (or any unknown language) after the opening back-ticks. The library will skip colourising and the flash stops:

text your code here

2. Lock the code-block colours with CSS
If you still want highlighting, pin the background colour so it never flips. Add a small stylesheet in your chat.load() snippet:

   window.voiceflow.chat.load({
     verify: { projectID: '<ID>' },
     url: 'https://general-runtime.voiceflow.com',
     versionID: 'production',
     assistant: {
       // override widget styles
       stylesheet: `data:text/css;base64,${btoa(`
         .vfrc-system-response pre,
         .vfrc-system-response code {
           background:#1e1e1e !important; /* pick any colour */
           transition:none !important;     /* remove blink */
         }
       `)}`
     }
   });

   window.voiceflow.chat.load({
     verify: { projectID: '<ID>' },
     url: 'https://general-runtime.voiceflow.com',
     versionID: 'production',
     assistant: {
       // override widget styles
       stylesheet: `data:text/css;base64,${btoa(`
         .vfrc-system-response pre,
         .vfrc-system-response code {
           background:#1e1e1e !important; /* pick any colour */
           transition:none !important;     /* remove blink */
         }
       `)}`
     }
   });

(You can host the CSS instead and pass the URL via assistant.stylesheet.) Either option prevents the alternating black/white flash while the agent is streaming code. Docs for reference:
https://docs.voiceflow.com (section Custom web chat styling → Custom CSS styling).

Braden•2mo ago

oh, that's interesting. We haven't seen a ton of code generation usecases. thanks for reporting this @Richcantoo

Flashing Output in AI Agent

Did you find this page helpful?