diff options
Diffstat (limited to 'packages/frontend/src/lib/components')
| -rw-r--r-- | packages/frontend/src/lib/components/ChatMessage.svelte | 21 |
1 files changed, 12 insertions, 9 deletions
diff --git a/packages/frontend/src/lib/components/ChatMessage.svelte b/packages/frontend/src/lib/components/ChatMessage.svelte index 447bb29..5212790 100644 --- a/packages/frontend/src/lib/components/ChatMessage.svelte +++ b/packages/frontend/src/lib/components/ChatMessage.svelte @@ -9,18 +9,21 @@ 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.content} - <span>{message.content}</span> + {#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> {/if} + {#each message.content as segment, i (segment.type === "tool-call" ? segment.id : i)} + {#if segment.type === "text"} + <span>{segment.text}</span> + {:else if segment.type === "tool-call"} + <ToolCallDisplay toolCall={segment} /> + {/if} + {/each} {#if message.isStreaming} <span class="inline-block w-2 h-4 bg-current animate-pulse ml-0.5 align-middle">▌</span> {/if} - {#if message.toolCalls && message.toolCalls.length > 0} - <div class="mt-2"> - {#each message.toolCalls as toolCall (toolCall.id)} - <ToolCallDisplay {toolCall} /> - {/each} - </div> - {/if} </div> </div> |