Potential fix for code scanning alert no. 3: DOM text reinterpreted as HTML

[4eckd]

Potential fix for https://github.com/Fused-Gaming/vln/security/code-scanning/3

In general, the fix is to ensure that any untrusted text is safely encoded or sanitized before being rendered as HTML, especially when using dangerouslySetInnerHTML. Since you need simple formatting (line breaks and backticked code) but not arbitrary HTML from users, the best approach is: (1) escape all HTML meta‑characters in the text, then (2) apply your markdown-like formatting on that escaped string, and then render the result. This preserves your existing behavior for predefined answers but prevents user‑supplied HTML from being executed.

The minimal change within this file is to introduce a small helper that converts a plain text string into safe HTML by first escaping &, <, >, ", and ', then replacing \n with <br /> and backticked segments with <code>…</code>. Then, instead of calling .replace directly on message.content in the JSX, call this new helper. This keeps functionality (line breaks and inline code styling) intact while preventing script injection.

Concretely:

• Add a helper function near the top of ClaudiaWidget (or just above it) in components/ClaudiaWidget.tsx, for example formatMessageContent(content: string): string, which:
  • Escapes HTML meta‑characters.
  • Replaces newline characters with <br />.
  • Wraps backticked segments in <code> tags on the escaped text.
• Update line 512 so that dangerouslySetInnerHTML uses formatMessageContent(message.content) instead of performing .replace() inline.

No new external libraries are strictly necessary; a small, explicit escape function in this file suffices.

---

Suggested fixes powered by Copilot Autofix. Review carefully before merging.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
design-vln-site	Ready	Preview, Comment	Feb 24, 2026 0:57am
docs-vln	Ready	Preview, Comment	Feb 24, 2026 0:57am
vln	Error		Feb 24, 2026 0:57am

[github-actions]

🔍 VLN Build Failure Diagnostics

Analysis Date: 2026-02-24 12:57:44 UTC
Critical Issues: 0
Warnings: 1

---

💡 INFO: TypeScript Check\n\nIf build failed due to type errors, run locally:

pnpm tsc --noEmit
```\n\n### ⚠️  WARNING: Build Output Missing\n\nThe `.next` directory was not created, indicating the build did not complete successfully.

**Common causes:**
1. Dependency installation failed
2. CSS compilation failed (check Tailwind/PostCSS)
3. TypeScript errors
4. Import errors (missing modules)

**Debug locally:**
```bash
pnpm install
pnpm build
```\n\n

---

### 🛠️ Quick Fixes

<details>
<summary>Click to expand common solutions</summary>

#### CSS Not Loading in Production
```bash
# Ensure CSS dependencies are in "dependencies" not "devDependencies"
grep -A 20 '"dependencies"' package.json | grep -E 'tailwindcss|postcss|autoprefixer'

Clean Build

rm -rf .next node_modules pnpm-lock.yaml
pnpm install
pnpm build

Type Errors

pnpm tsc --noEmit
# Fix all type errors before committing

---

📚 Documentation: See CLAUDE.md for build requirements
🤖 Generated by: VLN Build Diagnostics v1.0

---

Pipeline Results:

• 🔒 Security Audit: success
• 🎨 Lint & Type Check: failure
• 🔨 Build & Test: failure
• 📚 Build Docs: success
• 🎨 Build Design: success

Commit: c090829
Triggered by: @4eckd

_{🤖 Automated by VLN Build Diagnostics}