3dtours/KGStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added a subtle wave animation to the 'processing...' text.

Browse Source
This commit is contained in:
Xiaohan-Tian
2025-08-15 19:34:13 -07:00
parent c6fac8b319
commit f5a6c8d92c
3 changed files with 74 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChatBox.tsx
+4 -4
View File
@@ -276,7 +276,7 @@ const ChatBox: React.FC<ChatBoxProps> = ({ isVisible }) => {
setMessages(prev => [...prev, {
id: assistantMsgId,
role: 'assistant',
content: 'processing... 0 tokens received. click here to abort.',
content: '<span class="processing-wave">Processing...</span> 0 tokens received. click here to abort.',
isStreaming: true,
tokenCount: 0
}]);
@@ -304,7 +304,7 @@ const ChatBox: React.FC<ChatBoxProps> = ({ isVisible }) => {
// Update streaming message with token count and abort link
setMessages(prev => prev.map(msg =>
msg.id === assistantMsgId
? { ...msg, content: `processing... ${tokenCount} tokens received. click here to abort.`, tokenCount }
? { ...msg, content: `<span class="processing-wave">Processing...</span> ${tokenCount} tokens received. click here to abort.`, tokenCount }
: msg
));
} else if (chunk.type === 'done') {
@@ -396,7 +396,7 @@ const ChatBox: React.FC<ChatBoxProps> = ({ isVisible }) => {
setMessages(prev => [...prev, {
id: assistantMsgId,
role: 'assistant',
content: 'processing... 0 tokens received. click here to abort.',
content: '<span class="processing-wave">Processing...</span> 0 tokens received. click here to abort.',
isStreaming: true,
tokenCount: 0
}]);
@@ -441,7 +441,7 @@ const ChatBox: React.FC<ChatBoxProps> = ({ isVisible }) => {
// Update streaming message with token count and abort link
setMessages(prev => prev.map(msg =>
msg.id === assistantMsgId
? { ...msg, content: `processing... ${tokenCount} tokens received. click here to abort.`, tokenCount }
? { ...msg, content: `<span class="processing-wave">Processing...</span> ${tokenCount} tokens received. click here to abort.`, tokenCount }
: msg
));
} else if (chunk.type === 'done') {
src/components/chat/AssistantMessage.tsx
+44 -13
View File
@@ -113,19 +113,50 @@ const AssistantMessage: React.FC<AssistantMessageProps> = ({ content, isStreamin
// Handle special abort link for streaming messages
const renderContent = () => {
if (isStreaming && onAbort && content.includes('click here to abort')) {
const parts = content.split('click here to abort');
return (
<span>
{parts[0]}
<button
onClick={onAbort}
className="abort-link"
>
click here to abort
</button>
{parts[1]}
</span>
);
// Check if content has the processing wave HTML
const hasProcessingWave = content.includes('<span class="processing-wave">Processing...</span>');
if (hasProcessingWave) {
// Parse the content to handle both the wave animation and abort link
const parts = content.split('click here to abort');
const beforeAbort = parts[0];
const afterAbort = parts[1];
// Replace the HTML span with JSX
const processedBefore = beforeAbort.replace(
'<span class="processing-wave">Processing...</span>',
''
);
return (
<span>
<span className="processing-wave">Processing...</span>
{processedBefore}
<button
onClick={onAbort}
className="abort-link"
>
click here to abort
</button>
{afterAbort}
</span>
);
} else {
// Original logic for non-wave processing messages
const parts = content.split('click here to abort');
return (
<span>
{parts[0]}
<button
onClick={onAbort}
className="abort-link"
>
click here to abort
</button>
{parts[1]}
</span>
);
}
}
const processedContent = processContentWithXMLExpanders(content);