tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Adds the WaitingForUserInput state (#3620)

Browse Source
This commit is contained in:
Taylor Ho
2025-07-24 10:08:54 -07:00
committed by GitHub
parent 41f2ba8f9e
commit a65c547699
17 changed files with 284 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/AnimatedIcons.tsx
+51
View File
@@ -0,0 +1,51 @@
import { useState, useEffect } from 'react';
import {
CodeXml,
Cog,
Fuel,
GalleryHorizontalEnd,
Gavel,
GlassWater,
Grape,
Watch0,
Watch1,
Watch2,
Watch3,
Watch4,
Watch5,
Watch6,
} from './icons';
interface AnimatedIconsProps {
className?: string;
cycleInterval?: number; // milliseconds between icon changes
variant?: 'thinking' | 'waiting';
}
const thinkingIcons = [CodeXml, Cog, Fuel, GalleryHorizontalEnd, Gavel, GlassWater, Grape];
const waitingIcons = [Watch0, Watch1, Watch2, Watch3, Watch4, Watch5, Watch6];
export default function AnimatedIcons({
className = '',
cycleInterval = 500,
variant = 'thinking',
}: AnimatedIconsProps) {
const [currentIconIndex, setCurrentIconIndex] = useState(0);
const icons = variant === 'thinking' ? thinkingIcons : waitingIcons;
useEffect(() => {
const interval = setInterval(() => {
setCurrentIconIndex((prevIndex) => (prevIndex + 1) % icons.length);
}, cycleInterval);
return () => clearInterval(interval);
}, [cycleInterval, icons]);
const CurrentIcon = icons[currentIconIndex];
return (
<div className={`transition-opacity duration-200 w-4 h-4 ${className}`}>
<CurrentIcon className="w-full h-full" />
</div>
);
}
ui/desktop/src/components/BaseChat.tsx
+11 -11
View File
@@ -67,6 +67,7 @@ import { useSessionContinuation } from '../hooks/useSessionContinuation';
import { useFileDrop } from '../hooks/useFileDrop';
import { useCostTracking } from '../hooks/useCostTracking';
import { Message } from '../types/message';
import { ChatState } from '../types/chatState';
// Context for sharing current model info
const CurrentModelContext = createContext<{ model: string; mode: string } | null>(null);
@@ -138,9 +139,7 @@ function BaseChatContent({
ancestorMessages,
setAncestorMessages,
append,
isLoading,
isWaiting,
isStreaming,
chatState,
error,
setMessages,
input: _input,
@@ -226,8 +225,10 @@ function BaseChatContent({
// Handle recipe auto-execution
useEffect(() => {
handleAutoExecution(append, isLoading);
}, [handleAutoExecution, append, isLoading]);
const isProcessingResponse =
chatState !== ChatState.Idle && chatState !== ChatState.WaitingForUserInput;
handleAutoExecution(append, isProcessingResponse);
}, [handleAutoExecution, append, chatState]);
// Use shared session continuation
const { createNewSessionIfNeeded } = useSessionContinuation({
@@ -406,7 +407,7 @@ function BaseChatContent({
}}
isUserMessage={isUserMessage}
onScrollToBottom={handleScrollToBottom}
isStreamingMessage={isLoading}
isStreamingMessage={chatState !== ChatState.Idle}
/>
) : (
// Render messages with SearchView wrapper when search is enabled
@@ -422,7 +423,7 @@ function BaseChatContent({
}}
isUserMessage={isUserMessage}
onScrollToBottom={handleScrollToBottom}
isStreamingMessage={isLoading}
isStreamingMessage={chatState !== ChatState.Idle}
/>
</SearchView>
)}
@@ -501,12 +502,11 @@ function BaseChatContent({
</ScrollArea>
{/* Fixed loading indicator at bottom left of chat container */}
{isLoading && (
{chatState !== ChatState.Idle && (
<div className="absolute bottom-1 left-4 z-20 pointer-events-none">
<LoadingGoose
message={isLoadingSummary ? 'summarizing conversation…' : undefined}
isWaiting={isWaiting}
isStreaming={isStreaming}
chatState={chatState}
/>
</div>
)}
@@ -517,7 +517,7 @@ function BaseChatContent({
>
<ChatInput
handleSubmit={handleSubmit}
isLoading={isLoading}
chatState={chatState}
onStop={onStopGoose}
commandHistory={commandHistory}
initialValue={_input || (messages.length === 0 ? initialPrompt : '')}
ui/desktop/src/components/ChatInput.tsx
+6 -2
View File
@@ -5,6 +5,7 @@ import { Button } from './ui/button';
import type { View } from '../App';
import Stop from './ui/Stop';
import { Attach, Send, Close, Microphone } from './icons';
import { ChatState } from '../types/chatState';
import { debounce } from 'lodash';
import { LocalMessageStorage } from '../utils/localMessageStorage';
import { Message } from '../types/message';
@@ -52,7 +53,7 @@ interface ModelLimit {
interface ChatInputProps {
handleSubmit: (e: React.FormEvent) => void;
isLoading?: boolean;
chatState: ChatState;
onStop?: () => void;
commandHistory?: string[]; // Current chat's message history
initialValue?: string;
@@ -78,7 +79,7 @@ interface ChatInputProps {
export default function ChatInput({
handleSubmit,
isLoading = false,
chatState = ChatState.Idle,
onStop,
commandHistory = [],
initialValue = '',
@@ -99,6 +100,9 @@ export default function ChatInput({
const [displayValue, setDisplayValue] = useState(initialValue); // For immediate visual feedback
const [isFocused, setIsFocused] = useState(false);
const [pastedImages, setPastedImages] = useState<PastedImage[]>([]);
// Derived state - chatState != Idle means we're in some form of loading state
const isLoading = chatState !== ChatState.Idle;
const { alerts, addAlert, clearAlerts } = useAlerts();
const dropdownRef = useRef<HTMLDivElement>(null);
const toolCount = useToolCount();
ui/desktop/src/components/LoadingGoose.tsx
+14 -15
View File
@@ -1,25 +1,22 @@
import GooseLogo from './GooseLogo';
import ThinkingIcons from './ThinkingIcons';
import AnimatedIcons from './AnimatedIcons';
import FlyingBird from './FlyingBird';
import { ChatState } from '../types/chatState';
interface LoadingGooseProps {
message?: string;
isWaiting?: boolean;
isStreaming?: boolean;
chatState?: ChatState;
}
const LoadingGoose = ({
message,
isWaiting = false,
isStreaming = false
}: LoadingGooseProps) => {
const LoadingGoose = ({ message, chatState = ChatState.Idle }: LoadingGooseProps) => {
// Determine the appropriate message based on state
const getLoadingMessage = () => {
if (message) return message; // Custom message takes priority
if (isWaiting) return 'goose is thinking…';
if (isStreaming) return 'goose is working on it…';
if (chatState === ChatState.Thinking) return 'goose is thinking…';
if (chatState === ChatState.Streaming) return 'goose is working on it…';
if (chatState === ChatState.WaitingForUserInput) return 'goose is waiting…';
// Default fallback
return 'goose is working on it…';
};
@@ -30,10 +27,12 @@ const LoadingGoose = ({
data-testid="loading-indicator"
className="flex items-center gap-2 text-xs text-textStandard py-2"
>
{isWaiting ? (
<ThinkingIcons className="flex-shrink-0" cycleInterval={600} />
) : isStreaming ? (
{chatState === ChatState.Thinking ? (
<AnimatedIcons className="flex-shrink-0" cycleInterval={600} />
) : chatState === ChatState.Streaming ? (
<FlyingBird className="flex-shrink-0" cycleInterval={150} />
) : chatState === ChatState.WaitingForUserInput ? (
<AnimatedIcons className="flex-shrink-0" cycleInterval={600} variant="waiting" />
) : (
<GooseLogo size="small" hover={false} />
)}
ui/desktop/src/components/ThinkingIcons.tsx
-42
View File
@@ -1,42 +0,0 @@
import { useState, useEffect } from 'react';
import { CodeXml, Cog, Fuel, GalleryHorizontalEnd, Gavel, GlassWater, Grape } from './icons';
interface ThinkingIconsProps {
className?: string;
cycleInterval?: number; // milliseconds between icon changes
}
const thinkingIcons = [
CodeXml,
Cog,
Fuel,
GalleryHorizontalEnd,
Gavel,
GlassWater,
Grape,
];
export default function ThinkingIcons({
className = '',
cycleInterval = 500
}: ThinkingIconsProps) {
const [currentIconIndex, setCurrentIconIndex] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCurrentIconIndex((prevIndex) =>
(prevIndex + 1) % thinkingIcons.length
);
}, cycleInterval);
return () => clearInterval(interval);
}, [cycleInterval]);
const CurrentIcon = thinkingIcons[currentIconIndex];
return (
<div className={`transition-opacity duration-200 ${className}`}>
<CurrentIcon className="w-4 h-4" />
</div>
);
}
ui/desktop/src/components/hub.tsx
+2 -1
View File
@@ -25,6 +25,7 @@ import { type View, ViewOptions } from '../App';
import { SessionInsights } from './sessions/SessionsInsights';
import ChatInput from './ChatInput';
import { generateSessionId } from '../sessions';
import { ChatState } from '../types/chatState';
import { ChatContextManagerProvider } from './context_management/ChatContextManager';
import 'react-toastify/dist/ReactToastify.css';
@@ -87,7 +88,7 @@ export default function Hub({
<ChatInput
handleSubmit={handleSubmit}
isLoading={false}
chatState={ChatState.Idle}
onStop={() => {}}
commandHistory={[]}
initialValue=""
ui/desktop/src/components/icons/Watch0.tsx
+20
View File
@@ -0,0 +1,20 @@
export function Watch0({ className = '' }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.33"
d="M8 6.667V8l.667.667m2.086-3.56-.54-2.7A1.333 1.333 0 0 0 8.88 1.333H7.093A1.333 1.333 0 0 0 5.76 2.407l-.52 2.7m.013 5.8.534 2.666a1.333 1.333 0 0 0 1.333 1.074h1.813a1.333 1.333 0 0 0 1.334-1.074l.54-2.7M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
/>
</svg>
);
}
ui/desktop/src/components/icons/Watch1.tsx
+20
View File
@@ -0,0 +1,20 @@
export function Watch1({ className = '' }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.33"
d="M9 7 8 8l.667.667m2.086-3.56-.54-2.7A1.333 1.333 0 0 0 8.88 1.333H7.093A1.333 1.333 0 0 0 5.76 2.407l-.52 2.7m.013 5.8.534 2.666a1.333 1.333 0 0 0 1.333 1.074h1.813a1.333 1.333 0 0 0 1.334-1.074l.54-2.7M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
/>
</svg>
);
}
ui/desktop/src/components/icons/Watch2.tsx
+20
View File
@@ -0,0 +1,20 @@
export function Watch2({ className = '' }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.33"
d="M9.742 8H8l.667.667m2.086-3.56-.54-2.7A1.333 1.333 0 0 0 8.88 1.333H7.093A1.333 1.333 0 0 0 5.76 2.407l-.52 2.7m.013 5.8.534 2.666a1.333 1.333 0 0 0 1.333 1.074h1.813a1.333 1.333 0 0 0 1.334-1.074l.54-2.7M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
/>
</svg>
);
}
ui/desktop/src/components/icons/Watch3.tsx
+20
View File
@@ -0,0 +1,20 @@
export function Watch3({ className = '' }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.33"
d="M8.667 9.816 8 8l.667.667m2.086-3.56-.54-2.7A1.333 1.333 0 0 0 8.88 1.333H7.093A1.333 1.333 0 0 0 5.76 2.407l-.52 2.7m.013 5.8.534 2.666a1.333 1.333 0 0 0 1.333 1.074h1.813a1.333 1.333 0 0 0 1.334-1.074l.54-2.7M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
/>
</svg>
);
}
ui/desktop/src/components/icons/Watch4.tsx
+20
View File
@@ -0,0 +1,20 @@
export function Watch4({ className = '' }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.33"
d="M7 9.5 8 8l.667.667m2.086-3.56-.54-2.7A1.333 1.333 0 0 0 8.88 1.333H7.093A1.333 1.333 0 0 0 5.76 2.407l-.52 2.7m.013 5.8.534 2.666a1.333 1.333 0 0 0 1.333 1.074h1.813a1.333 1.333 0 0 0 1.334-1.074l.54-2.7M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
/>
</svg>
);
}
ui/desktop/src/components/icons/Watch5.tsx
+20
View File
@@ -0,0 +1,20 @@
export function Watch5({ className = '' }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.33"
d="M6.232 8.288 8 8l.667.667m2.086-3.56-.54-2.7A1.333 1.333 0 0 0 8.88 1.333H7.093A1.333 1.333 0 0 0 5.76 2.407l-.52 2.7m.013 5.8.534 2.666a1.333 1.333 0 0 0 1.333 1.074h1.813a1.333 1.333 0 0 0 1.334-1.074l.54-2.7M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
/>
</svg>
);
}
ui/desktop/src/components/icons/Watch6.tsx
+20
View File
@@ -0,0 +1,20 @@
export function Watch6({ className = '' }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.33"
d="M6.5 7 8 8l.667.667m2.086-3.56-.54-2.7A1.333 1.333 0 0 0 8.88 1.333H7.093A1.333 1.333 0 0 0 5.76 2.407l-.52 2.7m.013 5.8.534 2.666a1.333 1.333 0 0 0 1.333 1.074h1.813a1.333 1.333 0 0 0 1.334-1.074l.54-2.7M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
/>
</svg>
);
}
ui/desktop/src/components/icons/index.tsx
+14
View File
@@ -38,6 +38,13 @@ import Time from './Time';
import { Gear } from './Gear';
import Youtube from './Youtube';
import { Microphone } from './Microphone';
import { Watch0 } from './Watch0';
import { Watch1 } from './Watch1';
import { Watch2 } from './Watch2';
import { Watch3 } from './Watch3';
import { Watch4 } from './Watch4';
import { Watch5 } from './Watch5';
import { Watch6 } from './Watch6';
export {
ArrowDown,
@@ -79,5 +86,12 @@ export {
Send,
Settings,
Time,
Watch0,
Watch1,
Watch2,
Watch3,
Watch4,
Watch5,
Watch6,
Youtube,
};
ui/desktop/src/hooks/useChatEngine.ts
+2 -6
View File
@@ -67,9 +67,7 @@ export const useChatEngine = ({
messages,
append: originalAppend,
stop,
isLoading,
isWaiting,
isStreaming,
chatState,
error,
setMessages,
input: _input,
@@ -371,9 +369,7 @@ export const useChatEngine = ({
// Message stream controls
append,
stop,
isLoading,
isWaiting,
isStreaming,
chatState,
error,
setMessages,
ui/desktop/src/hooks/useMessageStream.ts
+38 -46
View File
@@ -3,6 +3,7 @@ import useSWR from 'swr';
import { getSecretKey } from '../config';
import { Message, createUserMessage, hasCompletedToolCalls } from '../types/message';
import { getSessionHistory } from '../api';
import { ChatState } from '../types/chatState';
let messageIdCounter = 0;
@@ -151,14 +152,8 @@ export interface UseMessageStreamHelpers {
/** Form submission handler to automatically reset input and append a user message */
handleSubmit: (event?: { preventDefault?: () => void }) => void;
/** Whether the API request is in progress */
isLoading: boolean;
/** Whether we're waiting for the first response from LLM */
isWaiting: boolean;
/** Whether we're actively streaming response content */
isStreaming: boolean;
/** Current chat state (idle, thinking, streaming, waiting for user input) */
chatState: ChatState;
/** Add a tool result to a tool call */
addToolResult: ({ toolCallId, result }: { toolCallId: string; result: unknown }) => void;
@@ -223,20 +218,9 @@ export function useMessageStream({
messagesRef.current = messages || [];
}, [messages]);
// We store loading state in another hook to sync loading states across hook invocations
const { data: isLoading = false, mutate: mutateLoading } = useSWR<boolean>(
[chatKey, 'loading'],
null
);
// Track waiting vs streaming states
const { data: isWaiting = false, mutate: mutateWaiting } = useSWR<boolean>(
[chatKey, 'waiting'],
null
);
const { data: isStreaming = false, mutate: mutateStreaming } = useSWR<boolean>(
[chatKey, 'streaming'],
// Track chat state (idle, thinking, streaming, waiting for user input)
const { data: chatState = ChatState.Idle, mutate: mutateChatState } = useSWR<ChatState>(
[chatKey, 'chatState'],
null
);
@@ -300,8 +284,7 @@ export function useMessageStream({
switch (parsedEvent.type) {
case 'Message': {
// Transition from waiting to streaming on first message
mutateWaiting(false);
mutateStreaming(true);
mutateChatState(ChatState.Streaming);
// Create a new message object with the properties preserved or defaulted
const newMessage = {
@@ -333,6 +316,15 @@ export function useMessageStream({
currentMessages = [...currentMessages, newMessage];
}
// Check if this message contains tool confirmation requests
const hasToolConfirmation = newMessage.content.some(
(content) => content.type === 'toolConfirmationRequest'
);
if (hasToolConfirmation) {
mutateChatState(ChatState.WaitingForUserInput);
}
mutate(currentMessages, false);
break;
}
@@ -464,16 +456,14 @@ export function useMessageStream({
return currentMessages;
},
[mutate, mutateWaiting, mutateStreaming, onFinish, onError, forceUpdate, setError]
[mutate, mutateChatState, onFinish, onError, forceUpdate, setError]
);
// Send a request to the server
const sendRequest = useCallback(
async (requestMessages: Message[]) => {
try {
mutateLoading(true);
mutateWaiting(true); // Start in waiting state
mutateStreaming(false);
mutateChatState(ChatState.Thinking); // Start in thinking state
setError(undefined);
// Create abort controller
@@ -544,23 +534,22 @@ export function useMessageStream({
setError(err as Error);
} finally {
mutateLoading(false);
mutateWaiting(false);
mutateStreaming(false);
// Check if the last message has pending tool confirmations
const currentMessages = messagesRef.current;
const lastMessage = currentMessages[currentMessages.length - 1];
const hasPendingToolConfirmation = lastMessage?.content.some(
(content) => content.type === 'toolConfirmationRequest'
);
if (hasPendingToolConfirmation) {
mutateChatState(ChatState.WaitingForUserInput);
} else {
mutateChatState(ChatState.Idle);
}
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[
api,
processMessageStream,
mutateLoading,
mutateWaiting,
mutateStreaming,
setError,
onResponse,
onError,
maxSteps,
]
[api, processMessageStream, mutateChatState, setError, onResponse, onError, maxSteps]
);
// Append a new message and send request
@@ -569,11 +558,16 @@ export function useMessageStream({
// If a string is passed, convert it to a Message object
const messageToAppend = typeof message === 'string' ? createUserMessage(message) : message;
// If we were waiting for user input and user provides input, transition away from that state
if (chatState === ChatState.WaitingForUserInput) {
mutateChatState(ChatState.Thinking);
}
const currentMessages = [...messagesRef.current, messageToAppend];
mutate(currentMessages, false);
await sendRequest(currentMessages);
},
[mutate, sendRequest]
[mutate, sendRequest, chatState, mutateChatState]
);
// Reload the last message
@@ -704,9 +698,7 @@ export function useMessageStream({
setInput,
handleInputChange,
handleSubmit,
isLoading: isLoading || false,
isWaiting: isWaiting || false,
isStreaming: isStreaming || false,
chatState,
addToolResult,
updateMessageStreamBody,
notifications,
ui/desktop/src/types/chatState.ts
+6
View File
@@ -0,0 +1,6 @@
export enum ChatState {
Idle = 'idle',
Thinking = 'thinking',
Streaming = 'streaming',
WaitingForUserInput = 'waitingForUserInput',
}