Merge pull request #156 from GCWing/gcwing/dev

fix: refine collapsed chat input processing controls

Author: GCWing

src/web-ui/src/flow_chat/components/ChatInput.scss

@@ -192,6 +192,43 @@
       margin: 0;
     }
 
+    &.bitfun-chat-input--processing {
+      .bitfun-chat-input__input-area {
+        left: 18px;
+        right: 118px;
+        width: auto;
+        transform: translateY(-50%);
+        justify-content: flex-start;
+      }
+
+      .rich-text-input {
+        display: none;
+      }
+
+      .bitfun-chat-input__actions {
+        position: absolute;
+        top: 50%;
+        right: 14px;
+        transform: translateY(-50%);
+        z-index: 2;
+      }
+
+      .bitfun-chat-input__actions-right {
+        display: flex !important;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .bitfun-chat-input__space-hint {
+        justify-content: flex-start;
+        width: 100%;
+      }
+
+      .bitfun-chat-input__action-button {
+        display: none !important;
+      }
+    }
+
     &:hover .bitfun-chat-input__space-hint {
       opacity: 0.9;
     }
@@ -212,6 +249,35 @@
     border: none;
     box-shadow: none;
   }
+
+  &__cancel-shortcut {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 4px;
+    font-size: 13px;
+    line-height: 24px;
+    color: var(--color-text-muted);
+    opacity: 0.72;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  &__capsule-divider {
+    width: 1px;
+    height: 14px;
+    flex-shrink: 0;
+    background: color-mix(in srgb, var(--color-text-muted) 28%, transparent);
+    pointer-events: none;
+  }
+
+  :root[data-theme="light"] &,
+  :root[data-theme-type="light"] &,
+  .light & {
+    .bitfun-chat-input__capsule-divider {
+      background: rgba(15, 23, 42, 0.2);
+    }
+  }
 
   &--active {
     .bitfun-chat-input__box {
@@ -1068,6 +1134,26 @@
     background: rgba(234, 179, 8, 0.6); // yellow-500 with opacity
     animation: breathing-pulse 2.5s ease-in-out infinite;
   }
+
+  &__queued-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 11px;
+    height: 11px;
+    padding: 0 3px;
+    border-radius: 999px;
+    background: #ef4444;
+    color: white;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 8px;
+    font-weight: 700;
+    line-height: 1;
+    box-shadow: 0 0 0 1px rgba(18, 18, 28, 0.85);
+    pointer-events: none;
+  }
 }
 
 @keyframes spin {

src/web-ui/src/flow_chat/components/ChatInput.tsx

@@ -741,8 +741,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         expand: true,
       });
       setInputTarget('btw');
+      dispatchInput({ type: 'DEACTIVATE' });
     } catch (e) {
       log.error('Failed to start /btw thread', { e });
+      dispatchInput({ type: 'ACTIVATE' });
+      dispatchInput({ type: 'SET_VALUE', payload: message });
     }
   }, [currentSessionId, derivedState, inputState.value, isBtwSession, setQueuedInput, t, workspacePath]);
 
@@ -782,8 +785,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     try {
       await sendMessage(message);
       dispatchInput({ type: 'CLEAR_VALUE' });
+      dispatchInput({ type: 'DEACTIVATE' });
     } catch (error) {
       log.error('Failed to send message', { error });
+      dispatchInput({ type: 'ACTIVATE' });
       dispatchInput({ type: 'SET_VALUE', payload: message });
     }
   }, [inputState.value, derivedState, transition, sendMessage, addToHistory, effectiveTargetSessionId, setQueuedInput, submitBtwFromInput]);
@@ -1265,15 +1270,21 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     if (inputState.isActive) return;
 
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== ' ') return;
-
       const target = e.target as HTMLElement;
       const isEditable =
         target.tagName === 'INPUT' ||
         target.tagName === 'TEXTAREA' ||
         target.isContentEditable ||
         target.closest('[contenteditable="true"]') !== null;
 
+      if (e.key === 'Escape' && derivedState?.canCancel) {
+        if (isEditable) return;
+        e.preventDefault();
+        void transition(SessionExecutionEvent.USER_CANCEL);
+        return;
+      }
+
+      if (e.key !== ' ') return;
       if (isEditable) return;
 
       e.preventDefault();
@@ -1287,7 +1298,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
     document.addEventListener('keydown', handleGlobalKeyDown);
     return () => document.removeEventListener('keydown', handleGlobalKeyDown);
-  }, [inputState.isActive]);
+  }, [derivedState?.canCancel, inputState.isActive, transition]);
 
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -1318,7 +1329,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     if (sendButtonMode === 'cancel') {
       return (
         <Tooltip content={t('input.stopGeneration')}>
-          <div className="bitfun-chat-input__send-button bitfun-chat-input__send-button--breathing" onClick={handleSendOrCancel}>
+          <div
+            className="bitfun-chat-input__send-button bitfun-chat-input__send-button--breathing"
+            onClick={handleSendOrCancel}
+            data-testid="chat-input-cancel-btn"
+          >
             <div className="bitfun-chat-input__breathing-circle" />
             {hasQueuedInput && <span className="bitfun-chat-input__queued-badge">1</span>}
           </div>
@@ -1353,6 +1368,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     );
   };
 
+  const isCollapsedProcessing = !inputState.isActive && !!derivedState?.isProcessing;
+
   return (
     <>
       <TemplatePickerPanel
@@ -1627,6 +1644,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 )}
               </div>
               <div className="bitfun-chat-input__actions-right">
+                {isCollapsedProcessing && (
+                  <>
+                    <span className="bitfun-chat-input__capsule-divider" />
+                    <span className="bitfun-chat-input__cancel-shortcut">
+                      <span className="bitfun-chat-input__space-key">Esc</span>
+                      <span>{t('input.cancelShortcut')}</span>
+                    </span>
+                  </>
+                )}
                 {canSwitchModes && (
                   <div 
                     className="bitfun-chat-input__mode-selector"

src/web-ui/src/locales/en-US/flow-chat.json

@@ -106,6 +106,8 @@
     "sendShortcut": "Send (⏎)",
     "stop": "Stop",
     "stopGeneration": "Stop Generation (Esc)",
+    "processingCapsule": "Processing",
+    "cancelShortcut": "Cancel",
     "clear": "Clear",
     "attach": "Attach File",
     "collapseInput": "Collapse input",

src/web-ui/src/locales/zh-CN/flow-chat.json

@@ -106,6 +106,8 @@
     "sendShortcut": "发送 (⏎)",
     "stop": "停止",
     "stopGeneration": "停止生成 (Esc)",
+    "processingCapsule": "正在处理",
+    "cancelShortcut": "取消",
     "clear": "清空",
     "attach": "附加文件",
     "collapseInput": "收起输入框",