Add activity indicator for chat operations
Shows a pulsing dot with status text during workflow execution, LLM thinking, and tool use. Disables the input and send button while active to prevent duplicate submissions. Also restructures the chat layout to use flexbox with the input container locked at the bottom.
This commit is contained in:
+72
-9
@@ -11,13 +11,41 @@
|
||||
--ollama-log-bg: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
/* Root chat view layout: flex column with input locked at bottom */
|
||||
.ollama-chat-view-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ollama-new-chat-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: var(--size-4-1);
|
||||
padding: var(--size-4-1) var(--size-4-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ollama-chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ollama-gap);
|
||||
padding: var(--size-4-2);
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ollama-input-container {
|
||||
display: flex;
|
||||
gap: var(--size-4-1);
|
||||
padding: var(--size-4-2);
|
||||
border-top: 1px solid var(--ollama-border);
|
||||
background-color: var(--background-primary);
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ollama-message {
|
||||
@@ -280,14 +308,6 @@
|
||||
}
|
||||
|
||||
/* Agent Mode Selector */
|
||||
.ollama-new-chat-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: var(--size-4-1);
|
||||
padding: var(--size-4-1) var(--size-4-2);
|
||||
}
|
||||
|
||||
.ollama-mode-selector {
|
||||
padding: var(--size-4-1) var(--size-4-2);
|
||||
border-radius: var(--ollama-radius);
|
||||
@@ -419,3 +439,46 @@
|
||||
color: var(--text-normal);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Activity Indicator */
|
||||
.ollama-activity-indicator {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: var(--size-4-1);
|
||||
padding: var(--size-4-1) 0;
|
||||
font-size: var(--font-ui-small);
|
||||
color: var(--text-muted);
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.ollama-activity-dot {
|
||||
display: inline-block;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--interactive-accent);
|
||||
animation: ollama-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ollama-activity-text {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes ollama-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled input/send during activity */
|
||||
.ollama-input:disabled,
|
||||
.ollama-send-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user