Bug: QuickHelp buttons crash with vue-i18n SyntaxError after 0bb5900b

Bug: QuickHelp buttons crash with vue-i18n SyntaxError

Commit: 0bb5900b9 (feat: make QuickHelp prompts and welcome message configurable)

Symptoms

After deploying any image built from 0bb5900b9 or later, the QuickHelp buttons on the chat page do not render. The browser console floods with:

This repeats for every quickhelp button (9 times) on every render cycle.

Root Cause

Commit 0bb5900b9 changed the quickhelp config structure so that button.title is now a localized dict (e.g. {"en": "Just Chat", "ar": "دردشة فقط", ...}) instead of an i18n key string (e.g. "quickHelp.justChat").

The commit correctly resolved the display text via resolveConfigText(button.title, locale) into the service property used for rendering. But it left textKey: button.title unchanged at line ~608:

this.quickHelpButtons = buttons.map((button) => {
  const title = resolveConfigText(button.title, locale);  // ✅ resolves correctly
  return {
    service: title,           // ✅ used for display
    textKey: button.title,    // ❌ still the dict object, not an i18n key
    ...
  };
});

Then at line 155 in the template:

<div class="quick-help-text">{{ $t(button.textKey) }}</div>

$t() receives the dict object instead of a string i18n key. Vue-i18n tries to parse it as a message format and throws SyntaxError.

Fix

Line 155 should use button.service (the already-resolved localized text) instead of (button.textKey):

<!-- Before (broken) -->
<div class="quick-help-text">{{ $t(button.textKey) }}</div>

<!-- After (fixed) -->
<div class="quick-help-text">{{ button.service }}</div>

The textKey property is no longer needed since titles are resolved at load time via resolveConfigText().

Impact

• All deployments using images built from 0bb5900b9+ are affected
• The chat page still loads but quickhelp buttons are invisible
• Console spam (9 errors per render cycle) degrades browser performance