From a41b4c2482b8134ca8a7daca168af4ecc6cc8492 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Wed, 20 May 2026 13:11:06 +0900
Subject: feat: markdown rendering, daisyUI 5 compliance fixes, garden/luxury
 themes

---
 packages/frontend/src/lib/components/ChatMessage.svelte | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'packages/frontend/src/lib/components/ChatMessage.svelte')

diff --git a/packages/frontend/src/lib/components/ChatMessage.svelte b/packages/frontend/src/lib/components/ChatMessage.svelte
index 5212790..1b92de3 100644
--- a/packages/frontend/src/lib/components/ChatMessage.svelte
+++ b/packages/frontend/src/lib/components/ChatMessage.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ChatMessage } from "../types.js";
+import MarkdownRenderer from "./MarkdownRenderer.svelte";
 import ToolCallDisplay from "./ToolCallDisplay.svelte";
 
 const { message }: { message: ChatMessage } = $props();
@@ -10,14 +11,17 @@ const isUser = $derived(message.role === "user");
 <div class="chat {isUser ? 'chat-end' : 'chat-start'} mb-2">
 	<div class="chat-bubble {isUser ? 'chat-bubble-primary' : 'chat-bubble-secondary'} max-w-[80%] break-words">
 		{#if message.thinking}
-			<details class="mb-2">
-				<summary class="cursor-pointer text-sm text-base-content/60 italic">Thinking...</summary>
-				<p class="text-sm text-base-content/60 italic mt-1 whitespace-pre-wrap">{message.thinking}</p>
-			</details>
+			<div class="collapse collapse-arrow mb-2">
+				<input type="checkbox" />
+				<div class="collapse-title text-sm opacity-60 italic p-0 min-h-0">Thinking...</div>
+				<div class="collapse-content text-sm opacity-60 italic p-0">
+					<p class="whitespace-pre-wrap mt-1">{message.thinking}</p>
+				</div>
+			</div>
 		{/if}
 		{#each message.content as segment, i (segment.type === "tool-call" ? segment.id : i)}
 			{#if segment.type === "text"}
-				<span>{segment.text}</span>
+				<MarkdownRenderer text={segment.text} streaming={message.isStreaming} />
 			{:else if segment.type === "tool-call"}
 				<ToolCallDisplay toolCall={segment} />
 			{/if}
-- 
cgit v1.2.3