Add syntax highlighting

Author: mattieruth

code-helper/client/package-lock.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "@pipecat-ai/client-js": "file:../../../pipecat-client-web/client-js",
     "@pipecat-ai/daily-transport": "file:../../../pipecat-client-web-transports/transports/daily",
-    "@pipecat-ai/small-webrtc-transport": "file:../../../pipecat-client-web-transports/transports/small-webrtc-transport"
+    "@pipecat-ai/small-webrtc-transport": "file:../../../pipecat-client-web-transports/transports/small-webrtc-transport",
+    "highlight.js": "^11.11.1"
   },
   "devDependencies": {
     "vite": "^7.1.7"

code-helper/client/package.json

@@ -6,6 +6,12 @@ import {
   createTransport,
 } from './config';
 
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import python from 'highlight.js/lib/languages/python';
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('python', python);
+
 class VoiceChatClient {
   constructor() {
     this.client = null;
@@ -276,8 +282,18 @@ class VoiceChatClient {
       roleSpan.className = 'role';
       roleSpan.textContent = role === 'user' ? 'You' : 'Bot';
 
-      const textDiv = document.createElement('div');
-      textDiv.textContent = text;
+      let textDiv;
+      if (type !== 'code') {
+        textDiv = document.createElement('div');
+        textDiv.textContent = text;
+      } else {
+        textDiv = document.createElement('pre');
+        let codeDiv = document.createElement('code');
+        codeDiv.textContent = text;
+        textDiv.appendChild(codeDiv);
+        textDiv.className = 'language-html';
+        hljs.highlightElement(textDiv);
+      }
 
       messageDiv.appendChild(roleSpan);
       messageDiv.appendChild(textDiv);

code-helper/client/src/app.js

@@ -149,7 +149,7 @@ body {
 }
 
 .conversation-message.code {
-  font-family: 'Courier New', monospace;
+  /* font-family: 'Courier New', monospace; */
   background-color: #374151;
   padding: 0.5rem;
   border-radius: 0.25rem;

code-helper/client/src/style.css

@@ -32,6 +32,7 @@
 from pipecat.pipeline.runner import PipelineRunner
 from pipecat.pipeline.task import PipelineParams, PipelineTask
 from pipecat.processors.aggregators.llm_context import LLMContext
+from pipecat.processors.aggregators.llm_response import LLMAssistantAggregatorParams
 from pipecat.processors.aggregators.llm_response_universal import LLMContextAggregatorPair
 from pipecat.processors.frameworks.rtvi import RTVIObserver, RTVIProcessor
 from pipecat.processors.transcript_processor import TranscriptProcessor
@@ -57,8 +58,8 @@ async def run_bot(transport: BaseTransport, runner_args: RunnerArguments):
 
     # Text-to-Speech service
     # Text aggregator to handle code snippets
-    aggregator = PatternPairAggregator()
-    aggregator.add_pattern_pair(
+    tts_aggregator = PatternPairAggregator()
+    tts_aggregator.add_pattern_pair(
         pattern_id="code",
         start_pattern="<code>",
         end_pattern="</code>",
@@ -68,7 +69,7 @@ async def run_bot(transport: BaseTransport, runner_args: RunnerArguments):
     tts = ElevenLabsTTSService(
         api_key=os.getenv("ELEVENLABS_API_KEY"),
         voice_id=os.getenv("ELEVENLABS_VOICE_ID"),
-        text_aggregator=aggregator,
+        text_aggregator=tts_aggregator,
         skip_aggregator_types=["code"],
     )
 
@@ -82,8 +83,21 @@ async def run_bot(transport: BaseTransport, runner_args: RunnerArguments):
         },
     ]
 
+    # LLM aggregator context
+    # Text aggregator to handle code snippets when the tts is skipped
+    llm_aggregator = PatternPairAggregator()
+    llm_aggregator.add_pattern_pair(
+        pattern_id="code",
+        start_pattern="<code>",
+        end_pattern="</code>",
+        type="code",
+        action=MatchAction.AGGREGATE,
+    )
     context = LLMContext(messages)
-    context_aggregator = LLMContextAggregatorPair(context)
+    context_aggregator = LLMContextAggregatorPair(
+        context=context,
+        assistant_params=LLMAssistantAggregatorParams(llm_text_aggregator=llm_aggregator),
+    )
 
     # Transcription processor
     transcript_processor = TranscriptProcessor()
@@ -142,6 +156,9 @@ async def on_transcript_update(processor: TranscriptProcessor, frame: Transcript
     @rtvi.event_handler("on_client_message")
     async def on_message(rtvi, msg):
         print("RTVI junk message:", msg.type, msg.data)
+        if msg.type == "get_context":
+            context = context_aggregator.assistant().messages
+            print(f"context: {context}")
 
     runner = PipelineRunner(handle_sigint=runner_args.handle_sigint)