diff options
Diffstat (limited to 'packages/frontend/src/lib/components/ChatMessage.svelte')
| -rw-r--r-- | packages/frontend/src/lib/components/ChatMessage.svelte | 14 |
1 files changed, 9 insertions, 5 deletions
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} |