fix: improve chat UI streaming feedback and fix test image path
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- Add loading spinner with 'Thinking...' text during streaming when content is not yet available - Fix :key binding to use message.id instead of message.content - Remove unnecessary TypeScript cast in file reader handler - Move test image into testdata/ directory for proper test organization - Remove t.Skip and simplify TestSummarizeChat test message
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div
|
||||
class="h-dvh pt-16 flex flex-col-reverse pb-36 overflow-scroll mx-auto px-4 md:px-6 max-w-6xl"
|
||||
>
|
||||
<template x-for="message in currentChatMessages" :key="message.content">
|
||||
<template x-for="message in currentChatMessages" :key="message.id">
|
||||
<div
|
||||
:class="['mb-4', message.role === 'user' ? 'text-right' : 'text-left']"
|
||||
>
|
||||
@@ -50,8 +50,20 @@
|
||||
|
||||
<hr x-show="message.thinking" class="my-2 border-primary-400/50" />
|
||||
|
||||
<!-- Loading Spinner (Streaming with no content yet) -->
|
||||
<div
|
||||
x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content"
|
||||
class="flex items-center gap-2 py-1"
|
||||
>
|
||||
<div
|
||||
class="h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
|
||||
></div>
|
||||
<span class="text-xs text-primary-600">Thinking...</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div
|
||||
x-show="message.content || message.status !== 'streaming'"
|
||||
class="prose max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
|
||||
x-html="renderMarkdown(message.content)"
|
||||
></div>
|
||||
@@ -224,7 +236,7 @@
|
||||
@change="
|
||||
Array.from($event.target.files).forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => { selectedImages.push(e.target.result as string); };
|
||||
reader.onload = (e) => { selectedImages.push(e.target.result); };
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
$event.target.value = '';
|
||||
|
||||
Reference in New Issue
Block a user