diff --git a/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx b/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx
index c0b7bbd6..bb3f8857 100644
--- a/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx
+++ b/src/workspaces/officerdev/src/apps/Chat/components/MessageBubble.tsx
@@ -99,9 +99,10 @@ type MessageBubbleProps = {
 export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
   switch (message.role) {
     case 'user': {
-      const match = message.text.match(FRONTMATTER_RE);
+      const rawText = typeof message.text === 'string' ? message.text : '';
+      const match = rawText.match(FRONTMATTER_RE);
       const metadata = match ? match[1]!.trim() : null;
-      const text = match ? message.text.slice(match[0]!.length) : message.text;
+      const text = match ? rawText.slice(match[0]!.length) : rawText;
       return (
         <>
           {metadata && <CollapsibleBlock label="Frontmatter" content={metadata} />}
@@ -120,24 +121,26 @@ export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
     case 'system':
       return <CollapsibleBlock label="System prompt" content={message.text} />;
 
-    case 'assistant':
-      if (!message.text) return null;
+    case 'assistant': {
+      const assistantText = typeof message.text === 'string' ? message.text : '';
+      if (!assistantText) return null;
       return (
         <div className="flex justify-start">
           <div className="max-w-[85%]">
             <div className="rounded-2xl rounded-tl-sm bg-muted/50 border border-border/50 px-4 py-2.5">
               <div className="chat-md">
                 <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
-                  {injectImages(message.text)}
+                  {injectImages(assistantText)}
                 </ReactMarkdown>
               </div>
             </div>
             <div className="flex justify-end mt-0.5">
-              <ReadAloudButton id={message.id ?? message.text.slice(0, 64)} text={message.text} />
+              <ReadAloudButton id={message.id ?? crypto.randomUUID()} text={assistantText} />
             </div>
           </div>
         </div>
       );
+    }
 
     case 'tool':
       if (message.toolName === 'question' && onAnswer) {