Add streaming status UX and model load state indicator
Streaming status transparency:
- generation_task.py emits 'status' SSE events at each pipeline stage:
"Analyzing your request..." before intent classification, tool label
before each tool execution, "Generating/Composing response..." before
each LLM streaming round
- chat.ts adds streamingStatus ref; cleared on first chunk or done/error;
includes fast 5s poll loop after warmModel() until model shows as loaded
- ChatView.vue shows pulsing dot + italic status label above content area;
falls back to blinking cursor once content arrives
- HomeView.vue shows status label in dashboard panel instead of '...'
Model load state indicator:
- /api/chat/status now queries /api/tags and /api/ps in parallel to
distinguish installed-but-cold vs loaded-in-VRAM model states
- New model status values: 'not_found' | 'cold' | 'loaded' (was 'ready')
- chatReady true for both 'cold' and 'loaded' (cold models still work)
- AppHeader shows 5 states: gray pulse (checking), red (Ollama down),
orange (not installed), yellow pulse (cold), green (loaded)
- Inline short label ("Cold", "Ready", "Offline", etc.) visible without
hovering; detailed tooltip on hover
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -26,14 +26,16 @@ export const useChatStore = defineStore("chat", () => {
|
||||
const streaming = ref(false);
|
||||
const streamingContent = ref("");
|
||||
const streamingToolCalls = ref<ToolCallRecord[]>([]);
|
||||
const streamingStatus = ref("");
|
||||
const lastContextMeta = ref<ContextMeta | null>(null);
|
||||
const ollamaStatus = ref<"checking" | "available" | "unavailable">("checking");
|
||||
const modelStatus = ref<"checking" | "ready" | "not_found">("checking");
|
||||
const modelStatus = ref<"checking" | "loaded" | "cold" | "not_found">("checking");
|
||||
const defaultModel = ref("");
|
||||
let statusPollTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
// Chat is usable when Ollama is up and model is at least installed (cold starts still work)
|
||||
const chatReady = computed(
|
||||
() => ollamaStatus.value === "available" && modelStatus.value === "ready"
|
||||
() => ollamaStatus.value === "available" && (modelStatus.value === "loaded" || modelStatus.value === "cold")
|
||||
);
|
||||
|
||||
async function fetchConversations(limit = 50, offset = 0) {
|
||||
@@ -178,8 +180,12 @@ export const useChatStore = defineStore("chat", () => {
|
||||
case "context":
|
||||
lastContextMeta.value = event.data.context as ContextMeta;
|
||||
break;
|
||||
case "status":
|
||||
streamingStatus.value = event.data.status as string;
|
||||
break;
|
||||
case "chunk":
|
||||
streamingContent.value += event.data.chunk as string;
|
||||
streamingStatus.value = "";
|
||||
break;
|
||||
case "tool_call":
|
||||
streamingToolCalls.value = [
|
||||
@@ -206,6 +212,7 @@ export const useChatStore = defineStore("chat", () => {
|
||||
}
|
||||
streamingContent.value = "";
|
||||
streamingToolCalls.value = [];
|
||||
streamingStatus.value = "";
|
||||
streaming.value = false;
|
||||
|
||||
// Update conversation in list
|
||||
@@ -221,6 +228,7 @@ export const useChatStore = defineStore("chat", () => {
|
||||
streaming.value = false;
|
||||
streamingContent.value = "";
|
||||
streamingToolCalls.value = [];
|
||||
streamingStatus.value = "";
|
||||
useToastStore().show(
|
||||
"Chat error: " + (event.data.error as string),
|
||||
"error",
|
||||
@@ -258,6 +266,7 @@ export const useChatStore = defineStore("chat", () => {
|
||||
streaming.value = false;
|
||||
streamingContent.value = "";
|
||||
streamingToolCalls.value = [];
|
||||
streamingStatus.value = "";
|
||||
}
|
||||
|
||||
async function cancelGeneration() {
|
||||
@@ -314,11 +323,25 @@ export const useChatStore = defineStore("chat", () => {
|
||||
async function warmModel(model: string) {
|
||||
try {
|
||||
await apiPost("/api/chat/warm", { model });
|
||||
// Poll faster after a warm request so the indicator updates promptly
|
||||
_pollUntilLoaded();
|
||||
} catch {
|
||||
// Warming is best-effort
|
||||
}
|
||||
}
|
||||
|
||||
function _pollUntilLoaded() {
|
||||
let attempts = 0;
|
||||
const MAX = 12; // up to ~60s of fast polling
|
||||
const timer = setInterval(async () => {
|
||||
await fetchStatus();
|
||||
attempts++;
|
||||
if (modelStatus.value === "loaded" || attempts >= MAX) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 5_000);
|
||||
}
|
||||
|
||||
return {
|
||||
conversations,
|
||||
currentConversation,
|
||||
@@ -327,6 +350,7 @@ export const useChatStore = defineStore("chat", () => {
|
||||
streaming,
|
||||
streamingContent,
|
||||
streamingToolCalls,
|
||||
streamingStatus,
|
||||
lastContextMeta,
|
||||
ollamaStatus,
|
||||
modelStatus,
|
||||
|
||||
Reference in New Issue
Block a user